<template>
  <div id="jx-experiment-virtual-machine" class="jx-virtual-machine" v-loading="deskLoading" :element-loading-text="deskLoadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 头部 -->
    <div class="jx-virtual-machine-header">
      <!-- 标题 -->
      <div class='step-main-content fl tops'>
        <div class="js-courseName"> {{courseName}} </div>
      </div>
      <!-- 虚机信息 -->
      <div class="jx-virtual-machine-header-info fr">
        <i class="iconfont icon-jingshi"></i>
        <el-tooltip effect="light" placement="top">
          <div slot="content" v-if="VirtualMachineInfo.mode">
            模板类型：<span v-if="VirtualMachineInfo.mode == 1">单节点</span>
            <span v-else-if="VirtualMachineInfo.mode == 2">集群</span>
            <div style="line-height:20px;" v-for="(item, index) in VirtualMachineInfo.containers" :key="index">
              {{ item.containerRole }}<br />
              ip：{{ item.ip }}<br />
              配置：{{ item.flavor }} <br />
              镜像名称：{{ item.imageName }}
              <div style="line-height:20px;" v-for="(subItem, subIndex) in item.ports" :key="subIndex">
                端口名称：{{ subItem.portName }}<br />
                容器内地址：{{ subItem.port }}<br />
                访问地址：{{ `${subItem.ip}:${subItem.exposedPort}` }}
              </div>
            </div>
          </div>
          <div slot="content" v-else>
            暂无虚拟机信息
          </div>
          <span>虚拟机信息</span>
        </el-tooltip>
      </div>
      <!-- 虚机切换列表 -->
      <div class="jx-virtual-machine-nav2 fr" v-if="VirtualMachineUrlArr.length > 1">
        <span class="fl" :class="{ active : MachineNavTabIndex == index}" v-for="(item, index) in VirtualMachineUrlArr" @click="MachineNavTab2(index, item)" :key="`MachineNav${index}`">{{ item.containerRole }}</span>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="jx-virtual-machine-main">
      <!-- 非全屏下 左侧 导航-->
      <div id="scroll-node" class="step-main-content fl new-step-main-content" v-show="!fullScreen">
        <div class="jx-virtual-machine-nav new-nav-naxialai" v-show="!fullScreen">
          <span class="fl" :class="{ 'active': activeIndex == 1 }" @click="MachineNavTab(1)">竞赛题目</span>
          <span class="fl" :class="{ 'active': activeIndex == 2 }" @click="MachineNavTab(2)" v-show="isShowUserAnswer">参考答案</span>
          <span v-show="activeIndex == 1 " class="fr task-score">总分： <span class="howmanyscore">{{taskScoreSum}}</span> 分</span>
        </div>
        <!-- 竞赛题目展示start -->
        <div class="tab-main" v-show="activeIndex == 1">
          <div>
            <div class="jx-main-content">
              <div class="step-main-content-text" v-if="flagTarget">
                <div class="markdown-body" v-html="laboratoryTargetData"></div>
              </div>
            </div>
            <!-- 暂无内容 -->
            <div class="jx-main-content" v-if="(!flagvideo && !flagTarget && !flaglaboratoryManualData ) || (flagvideo &&  !flagTarget &&  !flaglaboratoryManualData)">
              <div class="jx-content-tips">
                <img src="./../../../assets/images/index_no_data.png" style="margin:100px 0 20px 0" />
                <p>暂无内容</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 竞赛题目展示end -->
        <!-- 选手参考答案展示start -->
        <div class="tab-main" v-show="activeIndex == 2">
            <div class="jx-main-content" >
              <div class="step-main-content-text" v-if="userAnswerContent">
                <div class="markdown-body" v-html="userAnswerContent"></div>
              </div>
              <div class="jx-content-tips" v-else>
                <img src="./../../../assets/images/index_no_data.png" style="margin:100px 0 20px 0" />
                <p>暂无内容</p>
              </div>
            </div>
        </div>
        <!-- 选手参考答案展示end -->
      </div>
      <!-- 右侧导航 -->
      <div class="step-main-mirror fl">
        <div class="mirror-iframe" v-if="!mirrorIframeTip">
          <template v-for="(item, index) in VirtualMachineUrlArr">
            <iframe name="iframeitem" :key="index" :id="'VirtualMachineIframe' + item.containerId" v-if="VirtualMachineInfo.type==2" v-show="MachineNavTabIndex == index" :src="item.notebookUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe>
            <iframe name="iframeitem" :key="index" :id="'VirtualMachineIframe' + item.containerId" v-if="VirtualMachineInfo.type==1" v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe>
          </template>
        </div>
        <div class="mirror-iframe-tip" v-if="mirrorIframeTip">
          <img src="./../../../assets/images/mirror_iframe_tip.png" />
          <span class="mirror-iframe-tip-text">{{ mirrorIframeTipText }}</span>
          <el-button class="button-style" @click="refreshVirtual(0)">刷 新</el-button>
        </div>
        <!-- 全屏左侧导航 -->
        <div class="fullSide" v-if="fullScreen">
          <ul>
            <li @click="HandbookDialog(1)">
              <i class="iconfont icon-shiyongshouce"></i>
              <p>题目</p>
            </li>
          </ul>
          <!-- <ul>
            <li @click="HandbookDialog(2)">
              <i class="iconfont icon-shiyongshouce"></i>
              <p>答案</p>
            </li>
          </ul> -->
        </div>
        <!-- 右侧导航 -->
        <div class="step-main-mirror-dialog" :style="{ right: mirrorRightWidth + 'px'}" v-show="VirtualMachineUrl">
          <div class="step-main-mirror-dialog-block">
            <div class="step-main-mirror-dialog-box">
              <div class="mirror-dialog-header" id="time-header-dialog">
                <div class="quit-machine" @click="DropoutVirtual">
                  <img src="@/assets/images/close.png" alt="" srcset="">
                  关闭实验
                </div>
                <Time class="zujian-time" :autoStart="true"></Time>
                <div class="item-btn shiyanti">
                  <p>实验题:<span>{{taskScore}}</span>分</p>
                </div>
              </div>
              <div class="mirror-dialog-item">
                <div class="item-btn">
                  <span @click="refreshVirtual(0)"><i class="iconfont icon-shuaxin"></i>刷新</span>
                </div>
                <div class="item-btn">
                  <span @click="InitVirtual"><i class="iconfont icon-zhongxinshiyang"></i>初始化</span>
                  <el-tooltip class="item" effect="light" content="初始化实验环境" placement="left-end">
                    <i class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                </div>
                <div class="item-btn" v-if="!fullScreen">
                  <span @click="VirtualFullScreen(2)"><i class="iconfont icon-full-screen"></i>虚拟机全屏</span>
                </div>
                <div class="item-btn" v-if="fullScreen">
                  <span @click="VirtualFullScreen(3)"><i class="iconfont icon-full-screen"></i>退出全屏</span>
                </div>
                <div class="item-btn">
                  <span @click="ExperimentScreenshot"><i class="iconfont icon-jietu1"></i>实验截图</span>
                </div>
                <div class="item-btn">
                  <span @click="SftpConfig">
                    <i class="iconfont icon-upload"></i>SFTP工具
                  </span>
                </div>
                <div class="item-btn">
                  <span @click="CutDialog"><i class="iconfont icon-jietu"></i>剪切板</span>
                </div>
              </div>
              <div class="mirror-dialog-item">
                <div style="color:white;margin:10px 0">任务列表</div>
                <div class="item-btn" v-for="(item,index) in appList" :key="index" :style="item.taskId==taskId?'color:#1374e4':''">
                  <span class="collapsTitle_span" @click="EnteDetails(item)">
                    <span class="el-icon-notebook-2" :style="item.taskId==taskId?'color: #1374e4;':''"></span>任务{{index+1}}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="step-main-mirror-arrow" @click="MirrorArrowFn" v-if="VirtualMachineUrl">
            <div>工具栏</div>
          </div>
        </div>
        <!-- <div v-if="fullScreen" class="fullSide">
          <ul v-if="stepTypeStr == '单步骤实验'">
            <li @click="drawShowEvent">
              <i class="iconfont icon-bianji-shi"></i>
              <p>画笔</p>
            </li>
            <li @click="TargetDialog" v-if="laboratoryTargetData">
              <i class="iconfont icon-mubiaox"></i>
              <p>目标</p>
            </li>
            <li @click="HandbookDialog" v-if="laboratoryManualData">
              <i class="iconfont icon-shiyongshouce"></i>
              <p>手册</p>
            </li>
            <li @click="HandVideoDialog" v-if="experimentVideoData">
              <i class="iconfont icon-shipin1"></i>
              <p>视频</p>
            </li>
            <li @click="HandNoteDialog">
              <i class="iconfont icon-ico_compile_thick"></i>
              <p>笔记</p>
            </li>
          </ul>
          <ul v-if="stepTypeStr == '多步骤实验'">
            <li @click="drawShowEvent">
              <i class="iconfont icon-bianji-shi"></i>
              <p>画笔</p>
            </li>
            <li @click="TargetDialog" v-if="laboratoryTargetData">
              <i class="iconfont icon-mubiaox"></i>
              <p>目标</p>
            </li>
            <li @click="HandbookDialog">
              <i class="iconfont icon-shiyongshouce"></i>
              <p>手册</p>
            </li>
            <li @click="HandNoteDialog">
              <i class="iconfont icon-ico_compile_thick"></i>
              <p>笔记</p>
            </li>
          </ul>
        </div>
        <div class="step-main-mirror-side" v-if="fullScreen">
          <ul>
                        <li @click="drawShowEvent"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li @click="TargetDialog" v-if="laboratoryTargetData"><i class="iconfont icon-mubiaox"></i>目标</li>
                        <li @click="HandbookDialog" v-if="laboratoryManualData"><i class="iconfont icon-shiyongshouce"></i>手册</li>
                        <li @click="HandVideoDialog" v-if="experimentVideoData"><i class="iconfont icon-shipin1"></i>视频</li>
                        <li @click="HandNoteDialog"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>
          <ul v-if="stepTypeStr == '单步骤实验'">
                        <li @click="drawShowEvent"><i class="iconfont icon-bianji-shi"></i>画笔0</li>
                        <li @click="TargetDialog" v-if="laboratoryTargetData"><i class="iconfont icon-mubiaox"></i>目标</li>

                        <li @click="HandbookDialog" v-if="laboratoryManualData"><i class="iconfont icon-shiyongshouce"></i>手册</li>

                        <li @click="HandVideoDialog" v-if="experimentVideoData"><i class="iconfont icon-shipin1"></i>视频</li>

                        <li @click="HandNoteDialog"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>
                     <ul v-if="stepTypeStr == '多步骤实验'">
                        <li @click="drawShowEvent"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li @click="TargetDialog" v-if="laboratoryTargetData"><i class="iconfont icon-mubiaox"></i>目标</li>
                        <li @click="HandbookDialog" ><i class="iconfont icon-shiyongshouce"></i>手册</li>
                        <li @click="HandNoteDialog"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                     </ul>
        </div> -->
      </div>
    </div>
    <!-- 专科版本弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
      <div class="dialog-content">
        <i class="iconfont icon-tishi"></i>
        <p>有其它实验正在进行中，是否停止它进入该实验?</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
        <el-button class="button-style" @click="VirtualSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 请求超时盒子 -->
    <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtualFloag" width="460px">
      <div class="dialog-content">
        <i class="iconfont icon-tishi"></i>
        <p>请求超时，请点击关闭按钮，重新请求</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="VirtualClose">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 绘画盒子 -->
    <div id="drawBox">
      <i @click="drawTypeChange('rect','squre')" class="squre type"></i>
      <i @click="drawTypeChange('circle','circle')" class="circle type"></i>
      <i @click="drawTypeChange('pen','pen')" class="pen type iconfont icon-icon--"></i>
      <i class="recall iconfont icon-fanhui2"></i>
      <i class="clean">清除</i>
      <i class="exit">退出</i>
      <div id="penOption">
        <div></div>
        <div>
          <i @click="penSizeChange('6','point1')" class="point point1"><span></span></i>
          <i @click="penSizeChange('10','point2')" class="point point2"><span></span></i>
          <i @click="penSizeChange('14','point3')" class="point point3"><span></span></i>
          <i @click="penColorChange('#ff0f00','colorRed')" class="colorBtn colorRed"></i>
          <i @click="penColorChange('#ffbe00','colorYel')" class="colorBtn colorYel"></i>
          <i @click="penColorChange('#1a9bff','colorBul')" class="colorBtn colorBul"></i>
          <i @click="penColorChange('#1aad19','colorGre')" class="colorBtn colorGre"></i>
          <i @click="penColorChange('#4d4d4d','colorBla')" class="colorBtn colorBla"></i>
        </div>
      </div>

    </div>
    <canvas id="drawCanvas"></canvas>
    <!-- 分享控制 -->
    <el-dialog :close-on-click-modal="false" class="dialog-share" title="分享控制" :visible.sync="dialogShare" width="490px">
      <div class="dialog-content">
        <div class="share-item">
          <span>开启学生之间虚拟机分享</span>
          <!-- <span></span> -->
          <el-switch v-model="shareData.stuToStuSwitch" active-color="#13ce66" inactive-color="#b5c2ca">
          </el-switch>
        </div>
        <div class="share-item">
          <span>开启学生对教师虚拟机分享</span>
          <!-- <span class="share-item-xian"></span> -->
          <el-switch v-model="shareData.stuToTeaSwitch" active-color="#13ce66" inactive-color="#b5c2ca">
          </el-switch>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="ShareToTeaSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 更改配置 -->
    <el-dialog :close-on-click-modal="false" class="dialog-change-config" title="更改配置" :visible.sync="dialogChangeConfig" width="670px">
      <div class="dialog-content clear-fix">
        <div class="chang-config-item fl" v-if="changeConfig.changeConfigData.mode == 1 || changeConfig.changeConfigData.mode == 2">
          <span class="item-label">主节点:</span>
          <div class="item-content">
            CPU: <el-select v-model="changeConfig.zCupOptionsValue" placeholder="请选择">
              <el-option v-for="item in changeConfig.zCupOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> 核
          </div>
        </div>
        <div class="chang-config-item fl" v-if="changeConfig.changeConfigData.mode == 1 || changeConfig.changeConfigData.mode == 2">
          <span class="item-label">内存：</span>
          <div class="item-content">
            <el-select v-model="changeConfig.zRamOptionsValue" placeholder="请选择">
              <el-option v-for="item in changeConfig.zRamOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> G
          </div>
        </div>
        <div class="chang-config-item fl" v-if="changeConfig.changeConfigData.mode == 2">
          <span class="item-label">从节点:</span>
          <div class="item-content">
            CPU: <el-select v-model="changeConfig.cCupOptionsValue" placeholder="请选择">
              <el-option v-for="item in changeConfig.cCupOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> 核
          </div>
        </div>
        <div class="chang-config-item fl" v-if="changeConfig.changeConfigData.mode == 2">
          <span class="item-label">内存：</span>
          <div class="item-content">
            <el-select v-model="changeConfig.cRamOptionsValue" placeholder="请选择">
              <el-option v-for="item in changeConfig.cRamOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> G
          </div>
        </div>
        <p>推荐配置：CPU：2核 内存：8G</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="ChangeConfigSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分享桌面 -->
    <el-dialog :close-on-click-modal="false" class="dialog-share-desktop" title="分享桌面" :visible.sync="dialogShareDesktop" width="460px">
      <div class="dialog-content clear-fix">
        <div class="share-desktop-item">
          <span class="item-label">分享人：</span>
          <el-select v-model="ShareDeskData.shareValue" multiple filterable collapse-tags placeholder="请搜索选择用户" @change="selectAll(ShareDeskData.shareValue)">
            <el-option v-for="item in ShareDeskData.newOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="share-desktop-item">
          <span class="item-label">允许对方操作：</span>
          <el-radio-group v-model="ShareDeskData.shareRadio">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogShareDesktop = false">取 消</el-button>
        <el-button class="button-style" @click="ShareSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 实验截图 -->
    <el-dialog :close-on-click-modal="false" class="dialog-screenshot" title="实验截图" :visible.sync="dialogScreenshot" width="800px">
      <div class="dialog-content clear-fix">
        <img :src="dialogScreenshotUrl" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogScreenshotCopy" :data-clipboard-text="'<img src='+dialogScreenshotCopyUrl+'>'">复 制</el-button>
        <el-button class="button-style" @click="dialogScreenshotSave">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 学生实验手册显示隐藏 -->
    <el-dialog :close-on-click-modal="false" class="dialog-handbook" title="学生实验手册显示隐藏" :visible.sync="dialogHandbook" width="460px">
      <div class="dialog-content clear-fix">
        <p>控制该章节学生端所有实验手册显隐</p>
        <p>当前学生端实验手册为 <span>显示</span></p>
        <div class="handbook-item">
          <span class="item-label">设置：</span>
          <el-radio-group>
            <el-radio label="显示"></el-radio>
            <el-radio label="隐藏"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogHandbook = false">取 消</el-button>
        <el-button class="button-style" @click="dialogHandbook = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 视频 -->
    <el-dialog class="dialog-virual-video" v-dialogDragResize ref="dialog__wrapper" title="视频" :modal="false" :close-on-click-modal="false" :visible.sync="dialogVideoDrag" @close='closeVideoDialog'>
      <div class="dialog-body">
        <div class="line">
          <!-- <video width="100%" controls  disablePictureInPicture  controlslist="nodownload" :src="experimentDialogVideoData"></video> -->
          <video id="videoStep33" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' width="100%" height="100%" style="object-fit:fill">
            <source :src="experimentVideoData3">
          </video>
        </div>
      </div>
    </el-dialog>
    <!-- 实验目标 -->
    <el-dialog class="dialog-target" v-dialogDragResize title="实验目标" style="height:520px" :modal="false" :close-on-click-modal="false" :visible.sync="dialogtargetDrag" :modal-append-to-body="false">
      <div class="dialog-body">
        <div class="markdown-body" v-html="laboratoryTargetData"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogtargetDrag = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 竞赛题目 -->
    <el-dialog class="dialog-hand-book" v-dialogDragResize ref="dialog__wrapper" title="竞赛题目" :modal="false" :close-on-click-modal="false" :visible.sync="dialogHandbookDrag" style="height:520px" :modal-append-to-body="false">
      <!-- v-if="flagTarget "  laboratoryManualData-->
      <div class="dialog-body" v-if="flagTarget">
        <div class="markdown-body" v-html="laboratoryTargetData"></div>
      </div>
      <div v-else>
        <div class="jx-content-tips  nodata-box" style="padding:0; height:420px">
          <p>暂无内容</p>
        </div>
      </div>
    </el-dialog>
    <!-- 实验笔记 -->
    <el-dialog class="dialog-hand-note" v-dialogDragResize ref="dialog__wrapper" title="实验笔记" :modal="false" :close-on-click-modal="false" :visible.sync="dialogHandNoteDrag" :modal-append-to-body="false">
      <div class="dialog-body">
        <mavonEditor ref="HandNoteDialog"></mavonEditor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="NoteSave(2)">确定</el-button>
      </div>
    </el-dialog>
    <!-- 下载文件 -->
    <el-dialog :close-on-click-modal="false" class="dialog-download-file" title="从实验环境导出代码" :visible.sync="dialogDownload" width="480px">
      <div class="dialog-content">
        <p>将需要的代码文件放入到"/data"目录, 点击下载会把该目录打包下载。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <a @click="DownloadSave" class="button-style" style="width:90px;" :href="'/tes/experiment/course/'+chapterId+'/download'">下 载</a> -->
        <el-button class="button-style" @click="DownloadSave">下 载</el-button>
        <el-button class="button-style" @click="dialogDownload = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- SFTP -->
    <el-dialog :close-on-click-modal="false" class="sftp-dialog" title="SFTP工具" :visible.sync="dialogSftp" width="540px">
      <div class="sftp-content">
        <div class="sftp-header">
          <div class="sftp-title">
            您可以使用SFTP工具上传、下载文件:
          </div>
          <p>SFTP访问的地址为 <span>{{ sftpPort[0] }}</span> 端口号为 : <span>{{ sftpPort[1] }}</span></p>
          <p>用户名 : <span>root </span> 密码 : <span>root</span></p>
        </div>
        <div class="sftp-desc">
          <div class="sftp-title">
            上传工具为WinSCP
          </div>
          <div class="desc-item">
            <p>
              <img class="item-pic" src="./../../../assets/images/sftp.png" />
              <a :href="sftpIp[1]+'/WinSCP_64-Setup.exe'">
                <i class="iconfont icon-tubiaozhizuo-">
                  <!-- <img src="./../../../assets/images/sftp_icon1.png" /> -->
                </i>
                立即下載
              </a>
              <!-- <a :href="sftpIp[1]+'/WinSCP_64-Setup.exe'">
                                <i class="iconfont icon-xiazai2">
                                    <img src="./../../../assets/images/sftp_icon2.png" />
                                </i>
                            </a> -->
            </p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogSftp = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 剪切板 -->
    <el-dialog :close-on-click-modal="false" class="cut-dialog" title="剪切板" :visible.sync="dialogCut" width="655px" @close="CutCloseDialog">
      <div class="cut-title">
        <p><span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存</p>
      </div>
      <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
        <el-form-item prop="desc">
          <el-input type="textarea" @input="CutContentInput" maxlength="20000" v-model="cutData.cutRuleForm.desc" style="height:200px; resize: none;"></el-input>
          <div class="desc-num">{{cutData.cutRuleForm.descNum}}/20000</div>
        </el-form-item>
        <el-form-item style="text-align:center;">
          <el-button class="button-style" @click="cutSubmitForm('cutRuleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 文件上传 -->
    <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="文件上传" :visible.sync="dialogFileUpload" width="460px" @close="CloseFileUploadDialog">
      <el-form :model="FileUploadForm" :rules="FileUploadRules" ref="FileUploadForm">
        <el-form-item class="version-file">
          <el-button class="button-style">上传文件<input id="version-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getFile"></input></el-button>
          <p style="float:left; line-height: 36px; color: #1277eb; margin-left: 5px;">上传文件至虚拟机/root/tools/文件夹</p>
          <p style="float:left; margin-top: 20px; word-break:break-all; width: 100%;" v-if="FileUploadForm.versionFile.length>0">已选: {{FileUploadForm.versionFile}}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" style="width: 100px;" @click="UploadSave('FileUploadForm')">上传至虚机</el-button>
      </div>
    </el-dialog>
    <!-- 显隐控制 -->
    <el-dialog :close-on-click-modal="false" class="dialog-display-hide" title="学生手册显隐控制" :visible.sync="dialogDisplayHide" width="500px">
      <el-table ref="multipleTable" :data="DisplayHideData" height="400" :row-class-name="tableRowClassName" @select-all="handleSelectAllChange" @selection-change="handleSelectionChange" @select="toggleRowClick">
        <el-table-column type="selection" width="100"></el-table-column>
        <el-table-column property="name" label="章节名称"></el-table-column>
        <el-table-column width="80">
          <template slot-scope="scope">
            <span v-show="!scope.row.showed" style="color:#cfcfcf;">隐藏</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogDisplayHide = false">取 消</el-button>
        <el-button class="button-style" @click="DisplayHideSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 重选配置 -->
    <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="重选配置" :visible.sync="dialogDistributionFormVisible" label-width="100px" width="830px">
      <el-form :model="distributionform" ref="distributionform">
        <el-form-item class="is-required" label="实验类型：">
          <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
            <el-radio :label="1">可视化实验</el-radio>
            <el-radio :label="2">NoteBook实验</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
          <el-radio-group v-model="distributionform.resource">
            <el-radio :label="1">单节点</el-radio>
            <el-radio :label="2">集群</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="distributionform.experimentType == 2">
          <el-form-item class="config-item">
            <div class="fl item-config">
              <el-form-item prop="distributedData.cpuValue" :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.distributedData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="distributedData.ramValue" :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.distributedData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item class="is-required" label="镜像：">
            <el-cascader :options="distributionform.options0" v-model="distributionform.optionsValue0" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
        </template>
        <template v-if="distributionform.experimentType == 1">
          <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
          <!-- 伪分布 -->
          <el-form-item class="config-item" v-if="distributionform.resource == 1">
            <div class="fl item-config">
              <el-form-item prop="distributedData.cpuValue" :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.distributedData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="distributedData.ramValue" :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.distributedData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.distributedData.switchValue">
                            </el-switch>
                        </el-form-item> -->
          </el-form-item>
          <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 1">
            <el-cascader :options="distributionform.options0" v-model="distributionform.optionsValue0" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <!-- 伪分布end -->
          <!-- 主节点 -->
          <el-form-item class="config-item" v-if="distributionform.resource == 2">
            <div class="fl item-config">
              <el-form-item prop="nodeMianData.cpuValue" :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.nodeMianData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="nodeMianData.ramValue" :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.nodeMianData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.nodeMianData.switchValue">
                            </el-switch>
                        </el-form-item> -->
          </el-form-item>
          <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 2">
            <el-cascader :options="distributionform.options7" v-model="distributionform.optionsValue7" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <!-- 伪分布end -->
          <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
          <!-- 镜像配置 -->
          <el-form-item class="config-item" v-if="distributionform.resource == 2">
            <div class="fl item-config">
              <el-form-item prop="mirrorConfigData.cpuValue" :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.mirrorConfigData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="mirrorConfigData.ramValue" :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.mirrorConfigData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.mirrorConfigData.switchValue">
                            </el-switch>
                        </el-form-item> -->
          </el-form-item>
          <!-- 镜像配置 -->
          <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
            <div class="virtual-step">
              <ul>
                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)))" :class="{ active:((index+1)) == distributionform.virtualStepCurrent}">{{item.value}}</li>

              </ul>
            </div>
          </el-form-item>
          <div class="item-node" v-if="distributionform.resource == 2">
            <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 1 || distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options1" v-model="distributionform.optionsValue1" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 || distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options2" v-model="distributionform.optionsValue2" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options3" v-model="distributionform.optionsValue3" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options4" v-model="distributionform.optionsValue4" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options5" v-model="distributionform.optionsValue5" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options6" v-model="distributionform.optionsValue6" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div class="distribution-item" v-if="distributionform.distributionData">
        <div class="jx-course-box">
          <img :src="distributionform.distributionData.iconUrl" />
          <span v-text="distributionform.distributionData.imageName"></span>
        </div>
        <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
        <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
          <img src="./../../../assets/images/gpu_icon.png" />
        </div>
        <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
          <img src="./../../../assets/images/notebook_icon.png" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="DistributionFormSave('distributionform')">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 配置提示弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-config-tip" title="提示" :visible.sync="dialogConfigTip" width="460px">
      <div class="dialog-content">
        <p>虚拟机配置已被修改，点击'确定'将立即重启虚拟机。点击'取消'稍后可通过'刷新'功能重启虚拟机。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogConfigTip = false">取 消</el-button>
        <el-button class="button-style" @click="DialogConfigTip">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 初始化弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-init-virtual" title="提示" :visible.sync="dialogInitVirtual" width="460px">
      <div class="dialog-content">
        <p>初始化会丢失文件、数据，确定要初始化吗?</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogInitVirtual = false">取 消</el-button>
        <el-button class="button-style" @click="DialogInitVirtualSave(0)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 关闭分享 -->
    <el-dialog :close-on-click-modal="false" class="dialog-close-share" title="提示" :visible.sync="dialogCloseShare" width="460px">
      <div class="dialog-content">
        <p>是否要关闭分享?</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogCloseShare = false">取 消</el-button>
        <el-button class="button-style" @click="DialogCloseShareSave">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog class="bigger-dialog" :visible.sync="bigger">
      <img :src="biggerImgPath">
    </el-dialog>
    <!-- #region 王天宇-问题答疑 html dialog -->
    <!-- 我要提问 -->
    <el-dialog :close-on-click-modal="false" class="question-buhui-tiwen-dialog" :visible.sync="questionTiwenDialog" title="我要提问">
      <div class="dialog-content" style="text-align:left">
        <div class="dialog-tiwen-title">
          <span class="tiwen-bt">问题标题：</span>
          <el-input v-model="questionTiwen.title" placeholder="请输入问题标题"></el-input>
        </div>
        <div class="dialog-tiwen-content">
          <div class="ms-title tiwen-bt">问题描述：</div>
          <div>
            <mavonEditor class="step-experiment-editor" ref="questionTiwen"></mavonEditor>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="submitTiwen">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 我要回复 -->
    <el-dialog :close-on-click-modal="false" class="question-buhui-tiwen-dialog" :visible.sync="questionHuifuDialog" title="我要回复">
      <div class="dialog-content">
        <div class="dialog-tiwen-content">
          <div class="ms-title tiwen-bt">回复内容：</div>
          <div>
            <mavonEditor class="step-experiment-editor" ref="questionHuifu"></mavonEditor>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="submitHuifu">提 交</el-button>
      </span>
    </el-dialog>
    <!-- #endregion 王天宇-问题答疑 html dialog -->
    <!-- 查看选手参考答案提示 -->
    <el-dialog width="500px" :close-on-click-modal="false" class="user-answer-dialog" :visible.sync="showAnswerDialog" title="提示">
      <div class="dialog-content">
        <img src="../../../assets/images/nuli.png" alt="">
        <div>再努力一下，收获更多哦！</div> 
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="showAnswerDialog = false">再努力一下</el-button>
        <el-button class="button-style" @click="showAnswerFn">查看答案</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import videojs from 'video.js' //视频
import mavonEditor from '../../../components/mavonEditor'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {
  getTaskListTSCP,
  getTopicTSCP,
  getCourseChatperTask,
  showUserAnswerApi,
  getUserAnswerApi,
} from '@/api/competitionPlatform'
import Time from '../../../components/Time'
//导出word
import '../../../../static/wordExport/jquery.wordexport'
// 绘画
function Draw(obj, setting) {
  this.obj = obj
  this.type = setting.type || 'stroke'
  this.color = setting.color || '#ff0f00'
  this.width = setting.width || '6'
}
Draw.prototype = {
  init: function () {
    this.obj.strokeStyle = this.color
    this.obj.fillStyle = this.color
    this.obj.lineWidth = this.width
  },
  line: function (x, y, x1, y1) {
    this.init()
    this.obj.beginPath()
    this.obj.moveTo(x, y)
    this.obj.lineTo(x1, y1)
    this.obj.stroke()
  },
  rect: function (x, y, x1, y1) {
    this.init()
    this.obj.beginPath()
    this.obj.rect(x, y, x1 - x, y1 - y)
    if (this.type == 'stroke') {
      this.obj.stroke()
    } else if (this.type == 'fill') {
      this.obj.fill()
    }
  },
  circle: function (x, y, x1, y1) {
    this.init()
    var r = Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2))
    this.obj.beginPath()
    this.obj.arc(x, y, r, 0, 2 * Math.PI)
    if (this.type == 'stroke') {
      this.obj.stroke()
    } else if (this.type == 'fill') {
      this.obj.fill()
    }
  },
  pen: function (x, y, x1, y1) {
    this.init()
    this.obj.save()
    this.obj.lineCap = 'round'
    this.obj.lineTo(x1, y1)
    this.obj.stroke()
    this.obj.restore()
  },
}
export default {
  components: {
    mavonEditor,
    swiper,
    swiperSlide,
    Time,
  },
  data() {
    return {
      // 任务总分
      taskScoreSum: 0,
      // 任务分数
      taskScore: 0,
      //#region 王天宇-问题答疑
      //只看我的
      me: false,
      //我要提问列表和详情页显示
      showTiwenList: true,
      //我要提问弹层
      questionTiwenDialog: false,
      //我要回复弹层
      questionHuifuDialog: false,
      //我要提问详情页数据
      questionHuifu: {
        data: '',
        list: [],
      },
      //全部内容loading
      questionDetails: false,
      //我要提问数据
      questionTiwen: {
        //标题
        title: '',
        //内容
        content: '',
        //分页
        pagesize: 10,
        //分页
        currentPage: 1,
        //分页
        totalCount: 1000,
        //提问列表
        tiwenList: [],
      },
      //#endregion 王天宇-问题答疑
      chapterName: '',
      // 王天宇 星级评分 data
      starValue: 2,
      starColors: ['#c0c4cc', '#c0c4cc', '#c0c4cc '],
      // 王天宇 星级评分 data end
      // 浏览器分辨率
      ScreenSigma: '',
      //桌面loading
      deskLoading: false,
      deskLoadingText: '桌面加載中',

      contentLoading: null,

      drawType: 'pen',
      // 登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
      roles: '',
      // 课程ID
      courseId: '',
      // 章节ID
      chapterId: '',
      // 课程名称
      courseName: '',
      // 导航active
      activeIndex: 1,
      // 实验手册data
      experimentVideoData: '',
      // 弹窗视频data
      experimentDialogVideoData: '',
      laboratoryManualData: '',
      // 实验目标
      laboratoryTargetData: '',
      // 虚机信息
      VirtualMachineInfo: '',
      // 虚机全屏fullScreen
      fullScreen: false,
      // 虚机地址
      VirtualMachineUrl: '',
      VirtualMachineUrlArr: [],
      // 虚机当前ID数组
      VirtualMachineIdArr: [],
      // 虚机当前容器ID
      VirtualMachineId: '',
      iframeHeight: '',
      // 虚机导航列表index
      MachineNavTabIndex: '0',
      toolbarsMav: {
        bold: true, // 粗体
        italic: false, // 斜体
        header: true, // 标题
        //underline: true, // 下划线
        //strikethrough: true, // 中划线
        //mark: true, // 标记
        //superscript: true, // 上角标
        //subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        help: true, // 帮助
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        preview: true, // 预览
        fullscreen: true, // 全屏编辑
      },
      // 虚拟机id
      containerId: '',
      toolbars: {},
      // 分享控制弹窗
      dialogShare: false,
      shareData: '',
      // 重选配置弹窗
      dialogDistributionFormVisible: false,
      distributionform: {
        // 类型
        resource: 1,
        // 实验类型 1 可视化实验 2 notebook实验
        experimentType: 1,
        // 伪分布数组
        distributedData: {
          // cpu配置
          cpuOptions: [
            {
              value: '1',
              label: '1核',
            },
            {
              value: '2',
              label: '2核',
            },
            {
              value: '4',
              label: '4核',
            },
            {
              value: '6',
              label: '6核',
            },
            {
              value: '8',
              label: '8核',
            },
            {
              value: '10',
              label: '10核',
            },
          ],
          cpuValue: '',
          ramOptions: [
            {
              value: '1',
              label: '1G',
            },
            {
              value: '2',
              label: '2G',
            },
            {
              value: '4',
              label: '4G',
            },
            {
              value: '6',
              label: '6G',
            },
            {
              value: '8',
              label: '8G',
            },
            {
              value: '10',
              label: '10G',
            },
            {
              value: '12',
              label: '12G',
            },
            {
              value: '14',
              label: '14G',
            },
            {
              value: '16',
              label: '16G',
            },
            {
              value: '32',
              label: '32G',
            },
            {
              value: '48',
              label: '48G',
            },
            {
              value: '64',
              label: '64G',
            },
          ],
          ramValue: '',
          // GPU
          // switchValue: false
        },
        // 镜像配置
        mirrorConfigData: {
          // cpu配置
          cpuOptions: [
            {
              value: '1',
              label: '1核',
            },
            {
              value: '2',
              label: '2核',
            },
            {
              value: '4',
              label: '4核',
            },
            {
              value: '6',
              label: '6核',
            },
            {
              value: '8',
              label: '8核',
            },
            {
              value: '10',
              label: '10核',
            },
          ],
          cpuValue: '',
          ramOptions: [
            {
              value: '1',
              label: '1G',
            },
            {
              value: '2',
              label: '2G',
            },
            {
              value: '4',
              label: '4G',
            },
            {
              value: '6',
              label: '6G',
            },
            {
              value: '8',
              label: '8G',
            },
            {
              value: '10',
              label: '10G',
            },
            {
              value: '12',
              label: '12G',
            },
            {
              value: '14',
              label: '14G',
            },
            {
              value: '16',
              label: '16G',
            },
            {
              value: '32',
              label: '32G',
            },
            {
              value: '48',
              label: '48G',
            },
            {
              value: '64',
              label: '64G',
            },
          ],
          ramValue: '',
          // GPU
          switchValue: false,
        },
        // 主节点
        nodeMianData: {
          // cpu配置
          cpuOptions: [
            {
              value: '1',
              label: '1核',
            },
            {
              value: '2',
              label: '2核',
            },
            {
              value: '4',
              label: '4核',
            },
            {
              value: '6',
              label: '6核',
            },
            {
              value: '8',
              label: '8核',
            },
            {
              value: '10',
              label: '10核',
            },
          ],
          cpuValue: '',
          ramOptions: [
            {
              value: '1',
              label: '1G',
            },
            {
              value: '2',
              label: '2G',
            },
            {
              value: '4',
              label: '4G',
            },
            {
              value: '6',
              label: '6G',
            },
            {
              value: '8',
              label: '8G',
            },
            {
              value: '10',
              label: '10G',
            },
            {
              value: '12',
              label: '12G',
            },
            {
              value: '14',
              label: '14G',
            },
            {
              value: '16',
              label: '16G',
            },
            {
              value: '32',
              label: '32G',
            },
            {
              value: '48',
              label: '48G',
            },
            {
              value: '64',
              label: '64G',
            },
          ],
          ramValue: '',
          // GPU
          switchValue: false,
        },
        options0: [],
        optionsValue0: [],
        options1: [],
        optionsValue1: [],
        options2: [],
        optionsValue2: [],
        options3: [],
        optionsValue3: [],
        options4: [],
        optionsValue4: [],
        options5: [],
        optionsValue5: [],
        options6: [],
        optionsValue6: [],
        options7: [],
        optionsValue7: [],
        virtualStepList: [{ value: 1 }, { value: 2 }],
        virtualStepCurrent: 1,
        // 镜像列表数据
        distributionData: '',
      },

      // 更改配置
      dialogChangeConfig: false,
      // 更改配置select数据
      changeConfig: {
        zCupOptions: [
          {
            value: '1',
            label: '1',
          },
          {
            value: '2',
            label: '2',
          },
          {
            value: '4',
            label: '4',
          },
          {
            value: '6',
            label: '6',
          },
          {
            value: '8',
            label: '8',
          },
          {
            value: '10',
            label: '10',
          },
        ],
        zCupOptionsValue: '',
        zRamOptions: [
          {
            value: '1',
            label: '1',
          },
          {
            value: '2',
            label: '2',
          },
          {
            value: '4',
            label: '4',
          },
          {
            value: '6',
            label: '6',
          },
          {
            value: '8',
            label: '8',
          },
          {
            value: '10',
            label: '10',
          },
          {
            value: '12',
            label: '12',
          },
          {
            value: '14',
            label: '14',
          },
          {
            value: '16',
            label: '16',
          },
          {
            value: '32',
            label: '32',
          },
          {
            value: '48',
            label: '48',
          },
          {
            value: '64',
            label: '64',
          },
        ],
        zRamOptionsValue: '',
        cCupOptions: [
          {
            value: '1',
            label: '1',
          },
          {
            value: '2',
            label: '2',
          },
          {
            value: '4',
            label: '4',
          },
          {
            value: '6',
            label: '6',
          },
          {
            value: '8',
            label: '8',
          },
          {
            value: '10',
            label: '10',
          },
        ],
        cCupOptionsValue: '',
        cRamOptions: [
          {
            value: '1',
            label: '1',
          },
          {
            value: '2',
            label: '2',
          },
          {
            value: '4',
            label: '4',
          },
          {
            value: '6',
            label: '6',
          },
          {
            value: '8',
            label: '8',
          },
          {
            value: '10',
            label: '10',
          },
          {
            value: '12',
            label: '12',
          },
          {
            value: '14',
            label: '14',
          },
          {
            value: '16',
            label: '16',
          },
          {
            value: '32',
            label: '32',
          },
          {
            value: '48',
            label: '48',
          },
          {
            value: '64',
            label: '64',
          },
        ],
        cRamOptionsValue: '',
        changeConfigData: '',
      },

      // 分享桌面
      dialogShareDesktop: false,
      // 分享桌面下拉
      ShareDeskData: {
        oldOptions: [
          {
            value: '全选',
            label: '全选',
          },
        ],
        newOptions: [
          {
            value: '全选',
            label: '全选',
          },
        ],
        shareValue: [],
        lodShareValue: [],
        shareRadio: 0,
      },
      // 关闭分享
      dialogCloseShare: false,
      // 实验截图
      dialogScreenshot: false,
      dialogScreenshotCopyUrl: '',
      // 实验截图url
      dialogScreenshotUrl: '',
      // 学生手册
      dialogHandbook: false,
      // 视频拖拽
      dialogVideoDrag: false,
      // 手册拖拽
      dialogHandbookDrag: false,
      // 实验目标
      dialogtargetDrag: false,
      // 实验笔记拖拽
      dialogHandNoteDrag: false,
      // 下载文件弹窗
      dialogDownload: false,
      // sftp
      dialogSftp: false,
      // Sftp ip
      sftpIp: '',
      sftpPort: '',
      sftpHost: '',
      // 剪切板dialog
      dialogCut: false,
      cutData: {
        cutRuleForm: {
          desc: '',
          descNum: 20000,
        },
        cutRules: {
          desc: [{ required: true, message: '请填写内容', trigger: 'blur' }],
        },
      },
      // 文件上传dialog
      dialogFileUpload: false,
      FileUploadForm: {
        fileName: '',
        versionFile: '',
      },
      FileUploadRules: {
        versionFile: [
          { required: true, message: '请上传文件', trigger: 'blur' },
        ],
      },
      val: '123',
      // 虚机右侧导航
      mirrorRightWidth: 0,
      // 显隐弹窗
      dialogDisplayHide: false,
      tableFlag: false,
      DisplayHideData: [],
      multipleSelection: [],
      //消息通知
      noteBottom: -172,
      notesData: [],

      // 统计删除
      DeleteWebsock: null,
      DeleteWebsockOver: null,
      // isVirtualFullScreen 判断如果是刷新则不走display接口
      isVirtualFullScreen: true,

      // 配置提示弹窗
      dialogConfigTip: false,
      // 初始化弹窗
      dialogInitVirtual: false,

      // 错误提示
      mirrorIframeTip: false,
      mirrorIframeTipText: '',

      // 图片放大
      biggerImgPath: '',
      bigger: false,

      // 二期需求
      CutSwitch: false,
      contentText: '',

      //专科版本需求
      activeName: '',
      appList: [],
      //是否添加过班级
      userStatus: '',
      //弹窗
      dialogVirtual: false,
      //存储点击的那个章节id
      clickId: '',

      //专科版本
      //判断列表图标
      openFlag: '',
      //班级Id
      classId: '',

      //是否可以下载
      downFlag: false,

      //单任务还是多任务
      stepTypeStr: '',
      stepListIndex: 0,
      stepList: [],
      stepChapterId: '',

      experimentVideoData2: '',
      myVideo: '',
      myVideo2: '',
      stepType: '',
      myVideo3: '',
      //全屏下视频
      myVideo4: '',
      experimentVideoData3: '',
      //手册 视频 目标隐藏
      flaglaboratoryManualData: '',
      flagvideo: '',
      flagTarget: '',

      //请求超时弹窗
      dialogVirtualFloag: false,

      //剪切板增加弹窗
      dialogTip: false,
      flagSwitch: 1,
      isForbidden: false,

      // 查看答案提示框
      showAnswerDialog: false, 
      // 是否展示选手参考答案按钮
      isShowUserAnswer: false,
      // 选手参考答案内容
      userAnswerContent: '',
    }
  },
  created() {
    let self = this
    localStorage.setItem('SCROLLTOP', 0)
    //班级Id
    self.classId = self.$route.query.classId
    //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
    self.roles = self.$store.state.user.roles[0]
    // 课程ID
    self.courseId = self.$route.query.courseId
    // 章节ID
    self.chapterId = self.$route.query.chapterId
    // 任务id
    self.taskId = self.$route.query.taskId
    //判断是单任务还是多任务
    // self.stepTypeStr = self.$route.query.stepTypeStr

    self.ScreenSigma = (window.screen.width / window.screen.height).toFixed(2)
    self.$nextTick(function () {
      self.iframeHeight = $(window).height() - 60
      $('.mirror-iframe, .step-main-mirror').width(
        (1024 / 768) * ($(window).height() - 60)
      )
      $('.jx-virtual-machine-main').height(self.iframeHeight)
      $('.step-main-content').width(
        $(window).width() - $('.step-main-mirror').width()
      )
      window.onresize = function () {
        if (self.fullScreen) {
          $('.step-main-mirror').width(
            ($(window).width() / self.iframeHeight) * self.iframeHeight
          )
          setTimeout(() => {
            $('.mirror-iframe').width($('.step-main-mirror').width() - 1)
          }, 1000)
        } else {
          self.iframeHeight = $(window).height() - 60
          $('.mirror-iframe, .step-main-mirror').width(
            (1024 / 768) * self.iframeHeight
          )
          $('.jx-virtual-machine-main').height(self.iframeHeight)
          $('.step-main-content').width(
            $(window).width() - $('.step-main-mirror').width()
          )
        }
      }

      // 设置编辑器高度
      $('.step-main-editor').css({
        height: $(window).height() - 220 + 'px',
      })
      $('.step-main-editor .v-note-wrapper').css({
        height: '100%',
        'z-index': '1',
      })
      //yx 添加分辨率判断
      if (
        window.screen.height <= 900 ||
        $('.jx-virtual-machine-main').height() <= 715
      ) {
        let h = $('.jx-virtual-machine-main').height()
        $('.blocks').css('max-height', h - 20 + 'px')
        $('.detailBox').css('max-height', h - 20 + 'px')
        // $('.blocks').css('right','110px')
      }
    })
    // 初始化学习手册
    self.InitManual()
    // 初始化学习手册
    // if (self.stepTypeStr != '多步骤实验') {
    //   self.InitManual()
    // }
    // if (self.stepTypeStr == '多步骤实验') {
    //   self.initSteep()
    // }
    // 初始化进入实验
    self.InitExperiment(0, true)

    // 初始化头部信息
    self.InitHeaderInfo()

    // 二期需求 获取剪切板开关状态
    self.initClipboarFalg()

    //专科版本 获取列表数据
    self.DetailData()
    //是否添加过班级
    self.ClassInit()
    //文件下载
    self.AssintShow()

    // 王天宇 星级评分 created
    //获取评分
    self.getStar()
    // 王天宇 星级评分 created end

    // 是否展示选手参考答案
    this.showUserAnswerFn();
  },
  watch: {
    activeIndex(val) {
      if (val == 1) {
        const top = localStorage.getItem('SCROLLTOP') || 0
        this.$nextTick(() => {
          $('#scroll-node').scrollTop(top)
        })
      }
    },
  },
  mounted() {
    $('#spaceHeight').height($(window).height() - 130)
    $('#scroll-node').scroll(() => {
      if (this.activeIndex == 1 && !this.fullScreen) {
        const top = $('#scroll-node').scrollTop()
        localStorage.setItem('SCROLLTOP', top)
      }
    })

    //问题答疑
    this.getQuestionList(this.me)
  },
  destroyed: function () {
    let self = this
    if (self.myVideo2) {
      self.myVideo2.dispose()
    }
    if (self.myVideo3) {
      self.myVideo3.dispose()
    }
    localStorage.setItem('SCROLLTOP', 0)
    //页面销毁时关闭长连接
    self.DeleteWebsockOver()
  },
  methods: {
    // 是否展示选手参考答案
    showUserAnswerFn() {
        showUserAnswerApi(this.courseId).then((res) => {
            if (res.code == 200) {
                this.isShowUserAnswer = res.data.answer;
                if (this.isShowUserAnswer) {
                    this.getUserAnswerFn();
                }
            }
        }).catch(() => {});
    },
    // 获取选手参考答案
    getUserAnswerFn() {
        getUserAnswerApi(this.courseId, this.taskId).then((res) => {
            if (res.code == 200) {
                this.userAnswerContent = res.data;
            }
        }).catch(() => {});
    },
    // 退出虚机
    DropoutVirtual() {
      this.$confirm('确定退出虚机吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$router.replace({ path: '/CompetitionDetail' })
          // , replace: true
        })
        .catch(() => {})
    },
    //#region 王天宇-问题答疑 方法
    //只看我的
    seeMe() {
      let self = this
      self.questionTiwen.currentPage = 1
      self.getQuestionList(self.me)
    },
    //返回提问列表
    backTiwenList() {
      let self = this
      self.showTiwenList = true
      self.getQuestionList(self.me)
    },
    //回答内容
    getHuifu(id) {
      // let self = this
      // self.questionDetails = false
      // self.$http
      //   .get('/tes/problemCommunication/problemDetail/' + id)
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //       self.questionDetails = true
      //       self.questionHuifu.data = res.data
      //       self.questionHuifu.list = res.data.listReply
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //   })
    },
    //获取提问列表
    getQuestionList(me) {
      // let self = this
      // let str = 'listProblemPages'
      // //只看我的
      // if (me) {
      //   str = 'listMyProblemPages'
      // }
      // let pagesize = self.questionTiwen.pagesize
      // let currentPage = self.questionTiwen.currentPage
      // self.$http
      //   .get(
      //     '/tes/problemCommunication/' +
      //       str +
      //       '?pageNum=' +
      //       currentPage +
      //       '&pageSize=' +
      //       pagesize +
      //       '&courseId=' +
      //       self.courseId +
      //       '&chapterId=' +
      //       self.chapterId +
      //       '&keyWords='
      //   )
      //   .then((response) => {
      //     let res = response.data
      //     console.log(res)
      //     if (res.code == '200') {
      //       self.isForbidden = res.data.forbidden
      //       if (me) {
      //         self.questionTiwen.tiwenList = res.data.content
      //         self.questionTiwen.totalCount = res.data.total
      //       } else {
      //         self.questionTiwen.tiwenList = res.data.pageDTO.content
      //         self.questionTiwen.totalCount = res.data.pageDTO.total
      //       }
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //   })
    },
    //问题分页
    tiwenHandleSizeChange: function (size) {
      this.questionTiwen.pagesize = size
    },
    //问题分页
    tiwenHandleCurrentChange: function (currentPage) {
      this.questionTiwen.currentPage = currentPage
      this.getQuestionList(this.me)
    },
    //回复提交
    submitHuifu() {
      // let self = this
      // let id = self.questionHuifu.data.id
      // let cvalue = self.$refs.questionHuifu.value
      // let chtml = self.$refs.questionHuifu.getRender()
      // if (!cvalue.trim().length) {
      //   self.$message.error('回复内容不能为空！')
      //   return
      // }
      // if (cvalue.length > 5000) {
      //   self.$message.error('回复内容不能5000字符！')
      //   return
      // }
      // const loading = this.$loading({
      //   lock: true,
      //   text: '提交中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)',
      // })
      // console.log(cvalue, chtml)
      // self.$http
      //   .post('/tes/problemCommunication/toAnswer', {
      //     chapterId: self.chapterId,
      //     problemId: id,
      //     courseId: self.courseId,
      //     answerContent: cvalue,
      //     htmlContent: chtml,
      //   })
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //       self.$message({
      //         message: '回复成功',
      //         type: 'success',
      //       })
      //       self.getHuifu(id)
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //     loading.close()
      //     self.questionHuifuDialog = false
      //   })
    },
    //回复弹出
    questionHuifuDialogShow() {
      let self = this
      if (self.isForbidden) {
        return
      }
      self.questionHuifuDialog = true
      self.$nextTick(function () {
        self.$refs.questionHuifu.changeVal('')
      })
    },
    //提问弹出
    questionTiwenDialogShow() {
      let self = this
      if (self.isForbidden) {
        return
      }
      self.questionTiwenDialog = true
      self.questionTiwen.title = ''
      self.$nextTick(function () {
        self.$refs.questionTiwen.changeVal('')
      })
    },
    //提问提交
    submitTiwen() {
      // let self = this
      // let title = self.questionTiwen.title
      // let cvalue = self.$refs.questionTiwen.value
      // let chtml = self.$refs.questionTiwen.getRender()
      // if (!title.trim().length) {
      //   self.$message.error('问题标题不能为空！')
      //   return
      // }
      // if (!cvalue.trim().length) {
      //   self.$message.error('问题描述不能为空！')
      //   return
      // }
      // if (title.length > 50) {
      //   self.$message.error('问题标题不能50字符！')
      //   return
      // }
      // if (cvalue.length > 5000) {
      //   self.$message.error('问题描述不能5000字符！')
      //   return
      // }
      // console.log(title, cvalue, chtml)
      // console.log(self.$refs.questionTiwen)
      // const loading = this.$loading({
      //   lock: true,
      //   text: '提交中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)',
      // })
      // self.$http
      //   .post('/tes/problemCommunication/askQuestions', {
      //     chapterId: self.chapterId,
      //     problemName: title,
      //     courseId: self.courseId,
      //     problemContent: cvalue,
      //     htmlContent: chtml,
      //   })
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //       self.$message({
      //         message: '提交成功',
      //         type: 'success',
      //       })
      //       self.getQuestionList(self.me)
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //     loading.close()
      //     self.questionTiwenDialog = false
      //   })
    },
    //点击提问列表进入详情
    questionTiwenListClick(id) {
      let self = this
      self.showTiwenList = false
      self.getHuifu(id)
    },
    //#endregion 王天宇-问题答疑方法
    // 王天宇 星级评分 methods
    //评分获取
    getStar() {
      let self = this
      //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
      ///tes/course/课程id/chapter/任务id/info
      self.$http
        .get(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/info'
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.starValue = res.data.difficultyScore - 0
          } else {
            self.$message.error(res.message)
          }
        })
    },
    // 王天宇 星级评分 methods end
    //获取步骤
    initSteep() {
      let self = this
      self.$http
        .get('/tes/course/chapter/' + self.chapterId + '/step/list')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (res.data.length > 0) {
              self.stepList = res.data
              self.stepChapterId = self.stepList[0].stepChapterId
              self.ManyInitManual(self.stepChapterId)
            } else {
              self.ManyInitManual('')
            }
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //隐藏弹窗
    VirtualClose() {
      this.dialogVirtualFloag = false
    },
    //多任务
    ManyInitManual(stepChapterId) {
      // let self = this
      // self.experimentVideoData2 = ''
      // self.laboratoryManualData = ''
      // self.laboratoryTargetData = ''
      // // var videoPlayer = $("#video").get(0);
      // // if (typeof (videoPlayer) != "undefined") {
      // //     var myPlayer = videojs('video');
      // //     myPlayer.dispose();
      // // }
      // self.$http
      //   .get(
      //     '/tes/course/' +
      //       self.courseId +
      //       '/chapter/' +
      //       self.chapterId +
      //       '/detail/resource?type=5&stepChapterId=' +
      //       stepChapterId
      //   )
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //       if (
      //         res.data.laboratoryManual != undefined &&
      //         res.data.laboratoryManual.displayVersion != undefined &&
      //         res.data.laboratoryManual.displayVersion.length > 0 &&
      //         res.data.laboratoryManual.displayVersion[0].htmlContent !=
      //           undefined &&
      //         res.data.laboratoryManual.displayVersion[0].htmlContent != ''
      //       ) {
      //         self.laboratoryManualData =
      //           res.data.laboratoryManual.displayVersion[0].htmlContent
      //         self.flaglaboratoryManualData = true
      //       } else {
      //         self.flaglaboratoryManualData = false
      //       }
      //       //视频
      //       if (
      //         res.data.experimentVideo != undefined &&
      //         res.data.experimentVideo.displayVersion != undefined &&
      //         res.data.experimentVideo.displayVersion.length > 0 &&
      //         res.data.experimentVideo.displayVersion[0].filePath !=
      //           undefined &&
      //         res.data.experimentVideo.displayVersion[0].filePath != ''
      //       ) {
      //         // self.experimentVideoData2 = 'https://www.runoob.com/try/demo_source/movie.mp4'
      //         self.experimentVideoData2 =
      //           res.data.experimentVideo.displayVersion[0].filePath
      //         self.$nextTick(() => {
      //           $('#videoSteps').css('display', 'block')
      //           self.myVideo2 = videojs('videoStep', {
      //             bigPlayButton: true,
      //             textTrackDisplay: false,
      //             posterImage: true,
      //             errorDisplay: false,
      //             controls: true,
      //             playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放配置
      //           })
      //           self.myVideo2.src(self.experimentVideoData2)
      //           self.myVideo2.load(self.experimentVideoData2)
      //           console.log(self.myVideo2, 111111)
      //         })
      //         self.flagvideo = true
      //       } else {
      //         self.flagvideo = false
      //         self.experimentVideoData2 = ''
      //         if (self.myVideo2 != '') {
      //           self.myVideo2.load('')
      //         }
      //         var videoPlayer2 = $('#video').get(0)
      //         if (typeof videoPlayer2 != 'undefined') {
      //           var myPlayer2 = videojs('video')
      //           myPlayer2.dispose()
      //         }
      //         //    if(this.myVideo2 != ''){
      //         //        console.log(this.myVideo2,88888)
      //         //        this.myVideo2.dispose()
      //         //    }
      //       }
      //       // 新增实验目标
      //       if (
      //         res.data.laboratoryTarget != undefined &&
      //         res.data.laboratoryTarget.displayVersion != undefined &&
      //         res.data.laboratoryTarget.displayVersion.length > 0 &&
      //         res.data.laboratoryTarget.displayVersion[0].htmlContent !=
      //           undefined &&
      //         res.data.laboratoryTarget.displayVersion[0].htmlContent != ''
      //       ) {
      //         self.laboratoryTargetData =
      //           res.data.laboratoryTarget.displayVersion[0].htmlContent
      //         self.flagTarget = true
      //       } else {
      //         self.flagTarget = false
      //       }
      //       self.$nextTick(() => {
      //         $('.markdown-body p img').on('click', function () {
      //           self.biggerImgPath = $(this).attr('src')
      //           self.bigger = true
      //         })
      //       })
      //       this.Fn()
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },
    videoflag() {
      this.HandVideoDialog()
    },
    //处理逻辑
    Fn() {
      let self = this
      if (self.flagTarget && self.stepListIndex == 0) {
        self.flagTarget = true
      } else {
        self.flagTarget = false
      }
    },
    closeMask() {
      let timer
      clearInterval(timer)
      $('.mask-bg').css('left', '-100%')

      timer = setTimeout(() => {
        $('.mask').css('opacity', '0')
        $('.mask').css('display', 'none')
      }, 300)
    },
    mask() {
      $('.mask').css('opacity', '1')
      $('.mask').css('display', 'block')
      $('.mask-bg').css('left', '0')
    },
    //翻页
    page(page, number) {
      let self = this
      if (number == 2) {
        self.closeVideoDialog()
      }
      if (page == 1) {
        if (self.stepListIndex == self.stepList.length - 1) {
          self.stepListIndex = 0
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId

          self.ManyInitManual(self.stepChapterId)
        } else {
          self.stepListIndex = self.stepListIndex + 1
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.ManyInitManual(self.stepChapterId)
        }
      } else if (page == -1) {
        if (self.stepListIndex == 0) {
          self.stepListIndex = self.stepList.length - 1
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.ManyInitManual(self.stepChapterId)
        } else {
          self.stepListIndex = self.stepListIndex - 1
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.ManyInitManual(self.stepChapterId)
        }
      }
    },
    //yx新增需求 将文件下载能变成动态值
    AssintShow() {
      let self = this
      self.$http
        .get('/tes/unauthorized/internet')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.downFlag = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    downloadWord() {
      let self = this
      $('#note-editor .v-show-content').wordExport('实验笔记')
    },
    // 统计删除socket
    InitDelectWebSocket() {
      let self = this
      let hostname = window.location.host
      const wsuri =
        'ws://' + hostname + '/tes/ws/experiment/course/' + self.taskId
      self.DeleteWebsock = new WebSocket(wsuri)
      self.DeleteWebsock.onopen = self.Deletewebsocketonopen
      self.DeleteWebsock.onmessage = self.Deletewebsocketonmessage
      self.DeleteWebsockOver = () => {
        self.DeleteWebsock.close()
      }
    },
    Deletewebsocketonopen() {
      console.log('open sucess')
    },
    Deletewebsocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data)
      if (redata.type == 9) {
        this.dialogConfigTip = true
      }
    },
    // 初始化头部信息
    InitHeaderInfo() {
      // 获取任务名称，课程名称
      getCourseChatperTask(this.courseId, this.chapterId).then((res) => {
        if (res.code == 200) {
          this.courseName = res.data.courseName
          this.chapterName = res.data.chapterName
          this.taskScoreSum = res.data.taskScoreSum
          this.taskScore = res.data.taskScore
        }
      })
      // let self = this
      // self.$http
      //   .get('/tes/course/' + self.courseId + '/chapter/' + self.chapterId)
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //       // 课程名称
      //       self.courseName = res.data.courseName
      //       // // 章节名称
      //       self.chapterName = res.data.chapterName
      //       //课程总分
      //       this.taskScoreSum = res.data.taskScoreSum
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },
    // 初始化学习手册
    InitManual() {
      getTopicTSCP(this.courseId, this.taskId).then((res) => {
        if (res.code == '200') {
          //任务说明

          if (res.data != undefined && res.data != '') {
            this.laboratoryTargetData = res.data
            this.flagTarget = true
          }
          this.$nextTick(() => {
            $('.markdown-body p img').on('click', function () {
              this.biggerImgPath = $(this).attr('src')
              this.bigger = true
            })
          })
          this.Fn()
        } else {
          this.$message.error(res.message)
        }
      })
      // let self = this
      // self.$http
      //   .get(
      //     '/tes/course/' +
      //       self.courseId +
      //       '/chapter/' +
      //       self.chapterId +
      //       '/target'
      //   )
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //手册
      // if (
      //   res.data.laboratoryManual != undefined &&
      //   res.data.laboratoryManual.displayVersion != undefined &&
      //   res.data.laboratoryManual.displayVersion.length > 0 &&
      //   res.data.laboratoryManual.displayVersion[0].htmlContent !=
      //     undefined &&
      //   res.data.laboratoryManual.displayVersion[0].htmlContent != ''
      // ) {
      //   self.laboratoryManualData =
      //     res.data.laboratoryManual.displayVersion[0].htmlContent

      //   self.flaglaboratoryManualData = true
      //   self.showed = res.data.laboratoryManual.showed
      // } else {
      //   self.showed = res.data.laboratoryManual.showed
      //   self.flaglaboratoryManualData = false
      // }
      // //视频
      // if (
      //   res.data.experimentVideo != undefined &&
      //   res.data.experimentVideo.displayVersion != undefined &&
      //   res.data.experimentVideo.displayVersion.length > 0 &&
      //   res.data.experimentVideo.displayVersion[0].filePath !=
      //     undefined &&
      //   res.data.experimentVideo.displayVersion[0].filePath != ''
      // ) {
      //   self.experimentVideoData =
      //     res.data.experimentVideo.displayVersion[0].filePath
      //   // self.experimentVideoData= 'https://www.runoob.com/try/demo_source/movie.mp4'
      //   self.flagvideo = true
      //   this.$nextTick(() => {
      //     self.myVideo3 = videojs('videoStep3', {
      //       bigPlayButton: true,
      //       textTrackDisplay: false,
      //       posterImage: true,
      //       errorDisplay: false,
      //       controls: true,
      //       playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放配置
      //     })
      //     self.myVideo3.src(self.experimentVideoData)
      //     self.myVideo3.load(self.experimentVideoData)
      //   })
      // } else {
      //   self.flagvideo = false
      // }
      // // 新增实验目标

      // if (
      //   res.data.laboratoryTarget != undefined &&
      //   res.data.laboratoryTarget.displayVersion != undefined &&
      //   res.data.laboratoryTarget.displayVersion.length > 0 &&
      //   res.data.laboratoryTarget.displayVersion[0].htmlContent !=
      //     undefined &&
      //   res.data.laboratoryTarget.displayVersion[0].htmlContent != ''
      // ) {
      //   self.laboratoryTargetData =
      //     res.data.laboratoryTarget.displayVersion[0].htmlContent

      //   self.flagTarget = true
      // } else {
      //   self.flagTarget = false
      // }
      // self.$nextTick(() => {
      //   $('.markdown-body p img').on('click', function () {
      //     self.biggerImgPath = $(this).attr('src')
      //     self.bigger = true
      //   })
      // })
      // this.Fn()
      //   } else {
      //     self.$message.error(res.message)
      //   }
      // })
      // .catch((err) => {
      //   console.log(err)
      // })
    },
    // 配置虚拟机
    DialogConfigTip() {
      let self = this
      self.MachineNavTabIndex = 0
      self.dialogInitVirtual = false
      self.dialogConfigTip = false
      self.dialogShare = false
      self.dialogChangeConfig = false
      self.dialogShareDesktop = false
      self.dialogScreenshot = false
      self.dialogHandbook = false
      self.dialogVideoDrag = false
      self.dialogHandbookDrag = false
      self.dialogtargetDrag = false
      self.dialogHandNoteDrag = false
      self.dialogSftp = false
      self.dialogCut = false
      self.dialogFileUpload = false
      self.dialogCloseShare = false
      self.dialogDisplayHide = false
      self.dialogDistributionFormVisible = false
      self.InitExperiment(0)
    },
    // 初始化进入实验
    InitExperiment(index, isVirtualFullScreen) {
      // index 虚机index
      let self = this
      self.fullScreen = false
      self.deskLoading = true
      self.deskLoadingText = '桌面加載中'
      self.VirtualMachineUrl = ''
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = []
      self.$http
        //虚机请求修改chapterId
        .get('/tes/experiment/course/' + self.taskId)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.mirrorIframeTip = false
            // 初始化虚拟机信息
            self.VirtualMachineInfo = res.data

            // setTimeout(() => {
            //     self.iframeHeight = $(window).height() - 60
            //     $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
            //     $('.jx-virtual-machine-main').height(self.iframeHeight)
            //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
            // }, 800);

            // 虚机容器ID
            self.VirtualMachineId = res.data.containers[index].containerId

            self.fullScreen = false
            let fullData = []
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
              // 如果含有全屏状态
              // if(res.data.containers[i].fullScreen){
              //     fullData.push(res.data.containers[i].containerId)
              //     self.VirtualFullScreen(1,fullData)
              // }
              fullData.push(res.data.containers[i].containerId)
            }
            if (res.data.containers[0].fullScreen && res.data.type == 1) {
              self.VirtualFullScreen(1, fullData)
            }

            if (res.data.type == 2) {
              self.fullScreen = true
              $('.step-main-mirror').width(
                ($(window).width() / self.iframeHeight) * self.iframeHeight
              )
              setTimeout(() => {
                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                $('.mirror-iframe').css('margin-left', '20px')
                $('.iframs').css('margin-left', '25px')
              }, 1000)
            } else {
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  (1024 / 768) * ($(window).height() - 60)
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
              }, 800)
            }

            setTimeout(() => {
              // 虚机地址默认设置主节点
              self.VirtualMachineUrl =
                res.data.containers[index].desktopUrl ||
                res.data.containers[index].notebookUrl

              // 虚机地址数组
              self.VirtualMachineUrlArr = res.data.containers

              if (self.VirtualMachineUrlArr.length > 0) {
                // 统计删除socket
                self.InitDelectWebSocket()
              }
              self.deskLoading = false
              if (self.ScreenSigma < 1.44) {
                self
                  .$confirm(
                    '系统检测到您的系统分辨率太小，是否切换到全屏模式？',
                    '提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                      closeOnClickModal: false,
                    }
                  )
                  .then(() => {
                    $('.tops').css('width', 'auto')
                    self.VirtualFullScreen(2)
                  })
              }
            }, 800)
          } else {
            // self.deskLoading = false
            // self.$message.error(res.message)
            // 错误提示
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // tab切换
    MachineNavTab(index) {
      if (this.activeIndex == index) {
        return false;
      }
      if (index == 2) {
        this.showAnswerDialog = true;
      } else {
        this.activeIndex = index
      }
    },
    // 查看选手参考答案
    showAnswerFn() {
        this.showAnswerDialog = false;
        this.activeIndex = 2;
    },
    // 实验笔记保存
    NoteSave(tag) {
      // tag 1. 左侧实验手册2.实验手册弹窗
      let self = this
      let data = {}
      if (tag == 1) {
        data.notesType = 3
        data.pageNumber = 1
        data.content = self.$refs.question.value
        if (self.$refs.question.value == '') {
          self.$message.error('请填写实验笔记')
          return
        }
      } else if (tag == 2) {
        data.notesType = 3
        data.pageNumber = 1
        data.content = self.$refs.HandNoteDialog.value
        if (self.$refs.HandNoteDialog.value == '') {
          self.$message.error('请填写实验笔记')
          return
        }
      }
      self.$http
        .post(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/resource/notes',
          data
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '学习笔记保存成功',
              type: 'success',
            })
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 虚机导航列表切换
    MachineNavTab2(index, item) {
      let self = this
      self.MachineNavTabIndex = index

      self.VirtualMachineId = item.containerId
      // 重新初始化进入实验
      // self.InitExperiment(index, true)

      self.$http
        .get(
          '/tes/experiment/share/switch/' +
            self.chapterId +
            '?number=' +
            (index + 1)
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 刷新虚机
    refreshVirtual(index) {
      let self = this
      self.MachineNavTabIndex = index
      // 关闭拖拽弹窗
      self.dialogHandbookDrag = false
      self.dialogtargetDrag = false
      self.dialogHandNoteDrag = false
      self.dialogVideoDrag = false

      // 重新初始化进入实验
      // self.InitExperiment(index,false)
      self.deskLoading = true
      self.deskLoadingText = '桌面加載中'
      self.VirtualMachineUrl = ''
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = []
      self.$http
        .get('/tes/experiment/course/' + self.taskId)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.mirrorIframeTip = false
            if (
              res.data.containers[0].fullScreen ||
              (res.data.type == 2 && self.fullScreen)
            ) {
              self.fullScreen = true
              //把距离加上
              $('.mirror-iframe').css('margin-left', '45px')
            }
            // 初始化虚拟机信息
            self.VirtualMachineInfo = res.data
            // 虚机地址默认设置主节点
            self.VirtualMachineUrl =
              res.data.containers[index].desktopUrl ||
              res.data.containers[index].notebookUrl

            // 虚机地址数组
            self.VirtualMachineUrlArr = res.data.containers

            if (self.VirtualMachineUrlArr.length > 0) {
              // 统计删除socket
              self.InitDelectWebSocket()
            }
            // 虚机容器ID
            self.VirtualMachineId = res.data.containers[index].containerId

            let fullData = []
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
              // 如果含有全屏状态
              // if(res.data.containers[i].fullScreen){
              //     fullData.push(res.data.containers[i].containerId)
              //     self.VirtualFullScreen(1,fullData)
              // }
              fullData.push(res.data.containers[i].containerId)
            }
            if (!res.data.containers[0].fullScreen && res.data.type == 1) {
              self.fullScreen = false
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  (1024 / 768) * ($(window).height() - 60)
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
                //把距离去掉
                $('.mirror-iframe').css('margin-left', '0')
                $('.iframs').css('margin-left', '0')
              }, 1000)
            }
            if (res.data.type == 2) {
              if (self.fullScreen) {
                $('.step-main-mirror').width(
                  ($(window).width() / self.iframeHeight) * self.iframeHeight
                )
                setTimeout(() => {
                  // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                  $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                  $('.mirror-iframe').css('margin-left', '20px')
                  $('.iframs').css('margin-left', '25px')
                }, 1000)
              } else {
                setTimeout(() => {
                  self.iframeHeight = $(window).height() - 60
                  $('.mirror-iframe, .step-main-mirror').width(
                    (1024 / 768) * ($(window).height() - 60)
                  )
                  $('.jx-virtual-machine-main').height(self.iframeHeight)
                  $('.step-main-content').width(
                    $(window).width() - $('.step-main-mirror').width()
                  )
                  //把距离去掉
                  $('.mirror-iframe').css('margin-left', '0')
                  $('.iframs').css('margin-left', '0')
                }, 1000)
              }
            }
            self.deskLoading = false
          } else {
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 初始化虚机
    InitVirtual() {
      let self = this
      self.dialogInitVirtual = true
    },
    DialogInitVirtualSave(index) {
      let self = this
      // 关闭拖拽弹窗
      self.dialogHandbookDrag = false
      self.dialogtargetDrag = false
      self.dialogHandNoteDrag = false
      self.dialogVideoDrag = false

      self.MachineNavTabIndex = 0
      self.VirtualMachineUrl = ''
      self.VirtualMachineUrlArr = []
      self.VirtualMachineIdArr = []
      self.fullScreen = false

      self.dialogInitVirtual = false
      self.deskLoading = true
      self.deskLoadingText = '初始化中'
      self.$http
        .get('/tes/experiment/course/' + self.taskId + '/init')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.mirrorIframeTip = false
            // 初始化虚拟机信息
            self.VirtualMachineInfo = res.data

            // setTimeout(() => {
            //     self.iframeHeight = $(window).height() - 60
            //     $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
            //     $('.jx-virtual-machine-main').height(self.iframeHeight)
            //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
            //     //把距离去掉
            //     $('.mirror-iframe').css('margin-left','0')
            //     $('.iframs').css('margin-left','0')
            // }, 800);
            // self.deskLoading = false

            // 虚机ID
            self.VirtualMachineId = res.data.containers[index].containerId

            // 镜像ID初始化
            // self.VirtualImageId = res.data[index].imageId
            let fullData = []
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
              // 如果含有全屏状态
              if (res.data.containers[i].fullScreen && res.data.type == 1) {
                fullData.push(res.data.containers[i].containerId)
                self.VirtualFullScreen(1, fullData)
              }
            }
            if (res.data.type == 2) {
              self.fullScreen = true
              $('.step-main-mirror').width(
                ($(window).width() / self.iframeHeight) * self.iframeHeight
              )
              setTimeout(() => {
                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                $('.mirror-iframe').css('margin-left', '20px')
                $('.iframs').css('margin-left', '25px')
              }, 1000)
            } else {
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  $(window).width() - $('.step-main-content').width()
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
                //把距离去掉
                $('.mirror-iframe').css('margin-left', '0')
                $('.iframs').css('margin-left', '0')
              }, 800)
            }
            // self.$message({
            //     type: 'success',
            //     message: '初始化成功!'
            // })
            // if(self.ScreenSigma < 1.44){
            //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning',
            //         closeOnClickModal: false
            //     }).then(() => {
            //         self.VirtualFullScreen(2)
            //     })
            // }
            setTimeout(() => {
              // 虚机地址默认设置主节点
              self.VirtualMachineUrl =
                res.data.containers[index].desktopUrl ||
                res.data.containers[index].notebookUrl

              self.VirtualMachineUrlArr = res.data.containers
              self.deskLoading = false
              self.$message({
                type: 'success',
                message: '初始化成功!',
              })
              if (self.ScreenSigma < 1.44) {
                self
                  .$confirm(
                    '系统检测到您的系统分辨率太小，是否切换到全屏模式？',
                    '提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                      closeOnClickModal: false,
                    }
                  )
                  .then(() => {
                    $('.tops').css('width', 'auto')
                    self.VirtualFullScreen(2)
                  })
              }
            }, 5000)
          } else {
            setTimeout(() => {
              self.iframeHeight = $(window).height() - 60
              $('.mirror-iframe, .step-main-mirror').width(
                $(window).width() - $('.step-main-content').width()
              )
              $('.jx-virtual-machine-main').height(self.iframeHeight)
              $('.step-main-content').width(
                $(window).width() - $('.step-main-mirror').width()
              )
            }, 800)
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 全屏
    VirtualFullScreen(index, fullData) {
      let self = this
      const loading = self.$loading({
        lock: true,
        text: '虚机切换中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      let data = {}
      if (index == 1) {
        data = {
          containerIds: fullData,
          length: '1024',
          width: '768',
          fullScreen: false,
          contextId: self.taskId,
        }
      } else if (index == 2) {
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: window.screen.availWidth - 60,
          width: self.iframeHeight,
          fullScreen: true,
          contextId: self.taskId,
        }
      } else if (index == 3) {
        self.fullScreen = false
        // 退出全屏
        // 关闭手册拖拽弹窗
        self.dialogHandbookDrag = false
        self.dialogtargetDrag = false
        self.dialogHandNoteDrag = false
        self.dialogVideoDrag = false
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: '1024',
          width: '768',
          fullScreen: false,
          contextId: self.taskId,
        }
      }

      self.$http
        .post('/tes/experiment/container/display', data)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (index == 2) {
              self.fullScreen = true
              $('.step-main-mirror').width(
                ($(window).width() / self.iframeHeight) * self.iframeHeight
              )
              setTimeout(() => {
                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                $('.mirror-iframe').css('margin-left', '20px')
                $('.iframs').css('margin-left', '25px')
              }, 1000)
              setTimeout(() => {
                loading.close()
              }, 2000)
            } else if (index == 3 || index == 1) {
              self.fullScreen = false
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  (1024 / 768) * ($(window).height() - 60)
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
                $('.mirror-iframe').css('margin-left', '0')
                $('.iframs').css('margin-left', '0')
              }, 100)
              // 退出全屏
              self.activeIndex = 1
              loading.close()
            }
            // 关闭loading
            // 关闭视频播放
            if (self.myVideo2) {
              self.myVideo2.pause()
            } else if (self.myVideo3) {
              self.myVideo3.pause()
            } else if (self.myVideo4) {
              self.myVideo4.pause()
            }
            // let myVideo = document.getElementById('experiment-video');   //获取视频video
            // if(myVideo){
            //     if (!myVideo.paused){
            //         myVideo.pause();
            //     }
            // }
          } else {
            // 关闭loading
            loading.close()
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 更改配置
    ChangeConfig() {
      let self = this
      self.$http
        .get('/tes/experiment/course/' + self.taskId + '/flavor')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.changeConfig.changeConfigData = res.data
            self.changeConfig.zCupOptionsValue = res.data.cpu
            self.changeConfig.zRamOptionsValue = res.data.ram
            self.changeConfig.cCupOptionsValue = res.data.slaveCpu
            self.changeConfig.cRamOptionsValue = res.data.slaveRam
            // 显示更改配置弹窗
            self.dialogChangeConfig = true
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 保存配置
    ChangeConfigSave() {
      let self = this
      self.$http
        .post('/tes/experiment/course/' + self.taskId + '/flavor', {
          cpu: Number(self.changeConfig.zCupOptionsValue),
          ram: Number(self.changeConfig.zRamOptionsValue),
          slaveCpu: Number(self.changeConfig.cCupOptionsValue),
          slaveRam: Number(self.changeConfig.cRamOptionsValue),
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '更改配置成功',
              type: 'success',
            })
            self.dialogChangeConfig = false
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 下载文件
    DownloadFile() {
      let self = this
      self.dialogDownload = true
    },
    // 下载文件确定
    DownloadSave() {
      let self = this
      self.dialogDownload = false
      const loading = self.$loading({
        lock: true,
        text: '正在下载',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      self.$http
        .get('/tes/experiment/course/' + self.taskId + '/zip')
        .then((response) => {
          let res = response.data
          if (res.code == 200) {
            loading.close()
            // self.DownLoadZip()
            let downloadElement = document.createElement('a')
            downloadElement.style.display = 'none'
            downloadElement.href =
              '/tes/experiment/course/' + self.taskId + '/download'
            document.body.appendChild(downloadElement)
            downloadElement.click() //点击下载
          } else {
            loading.close()
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    DownLoadZip() {
      let self = this
      self.$http
        .get('/tes/experiment/course/' + self.taskId + '/download', {
          responseType: 'blob',
        })
        .then((response) => {
          let blob = new Blob([response.data], {
            type: response.headers['content-disposition'],
          })
          var str = response.headers['content-disposition']
          str = str.match(/''(\S*?).zip/)[1]

          let fileName = decodeURI(str) + '.zip'
          let url = window.URL.createObjectURL(blob)
          let downloadElement = document.createElement('a')
          downloadElement.style.display = 'none'
          downloadElement.href = url
          downloadElement.download = fileName //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(url)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 查询NoteBook镜像列表
    getImageList(is_notebook) {
      this.$http
        .get(
          '/tes/image-allocation/image?cluster=false&notebook=' + is_notebook
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            this.distributionform.options0 = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 选择实验类型
    experimentTypeChange(e) {
      this.distributionform.resource = 1
      this.distributionform.distributedData.cpuValue = ''
      this.distributionform.distributedData.ramValue = ''
      // this.distributionform.distributedData.switchValue = false
      this.distributionform.mirrorConfigData.cpuValue = ''
      this.distributionform.mirrorConfigData.ramValue = ''
      this.distributionform.mirrorConfigData.switchValue = false
      this.distributionform.nodeMianData.cpuValue = ''
      this.distributionform.nodeMianData.ramValue = ''
      this.distributionform.optionsValue0 = []
      this.distributionform.optionsValue1 = []
      this.distributionform.optionsValue2 = []
      this.distributionform.optionsValue3 = []
      this.distributionform.optionsValue4 = []
      this.distributionform.optionsValue5 = []
      this.distributionform.optionsValue6 = []
      this.distributionform.optionsValue7 = []
      this.distributionform.virtualStepCurrent = 1
      this.distributionform.distributionData = ''
      let type = e == 1 ? false : true
      this.getImageList(type)
    },
    // 跳转到编辑实验镜像页
    VirtualLink() {
      let self = this
      // self.distributionform.resource = 1
      // let cluster = self.distributionform.resource == 1 ? false : true

      self.getImageList(false)
      self.$http
        .get('/tes/image-allocation/image?cluster=true&notebook=false')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.distributionform.options1 = res.data
            self.distributionform.options2 = res.data
            self.distributionform.options3 = res.data
            self.distributionform.options4 = res.data
            self.distributionform.options5 = res.data
            self.distributionform.options6 = res.data
            self.distributionform.options7 = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      // 显示分配镜像弹窗
      self.dialogDistributionFormVisible = true
      self.$http
        .get(
          '/tes/image-allocation/course/' + self.courseId + '/' + self.chapterId
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (res.data.allocated) {
              self.distributionform.experimentType = res.data.type
              //获取可视化实验单节点/notebook实验镜像列表
              if (res.data.type == 2) {
                self.getImageList(true)
              }
              if (res.data.mode == 1) {
                self.distributionform.resource = res.data.mode
                // 伪分布取值
                self.distributionform.distributedData.cpuValue =
                  '' + res.data.cpu + ''
                self.distributionform.distributedData.ramValue =
                  '' + res.data.ram + ''
                // self.distributionform.distributedData.switchValue = res.data.gpu

                self.distributionform.optionsValue0 = [
                  res.data.image.imageSource,
                  res.data.image.imageId,
                ]
                self.handleItemChange(self.distributionform.optionsValue0)
              } else if (res.data.mode == 2) {
                self.distributionform.resource = res.data.mode
                // 主节点取值
                self.distributionform.nodeMianData.cpuValue =
                  '' + res.data.cpu + ''
                self.distributionform.nodeMianData.ramValue =
                  '' + res.data.ram + ''
                self.distributionform.nodeMianData.switchValue = res.data.gpu

                self.distributionform.optionsValue7 = [
                  res.data.image.imageSource,
                  res.data.image.imageId,
                ]
                // 从节点镜像配置
                self.distributionform.mirrorConfigData.cpuValue =
                  '' + res.data.slaveCpu + ''
                self.distributionform.mirrorConfigData.ramValue =
                  '' + res.data.slaveRam + ''
                self.distributionform.mirrorConfigData.switchValue =
                  res.data.slaveGpu
                self.distributionform.virtualStepCurrent = res.data.slaveSize
                self.$nextTick(() => {
                  if (res.data.slaveSize == 1) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                  } else if (res.data.slaveSize == 2) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId,
                    ]
                  } else if (res.data.slaveSize == 4) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId,
                    ]
                    self.distributionform.optionsValue3 = [
                      res.data.slaveImages[2].imageSource,
                      res.data.slaveImages[2].imageId,
                    ]
                    self.distributionform.optionsValue4 = [
                      res.data.slaveImages[3].imageSource,
                      res.data.slaveImages[3].imageId,
                    ]
                  } else if (res.data.slaveSize == 6) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId,
                    ]
                    self.distributionform.optionsValue3 = [
                      res.data.slaveImages[2].imageSource,
                      res.data.slaveImages[2].imageId,
                    ]
                    self.distributionform.optionsValue4 = [
                      res.data.slaveImages[3].imageSource,
                      res.data.slaveImages[3].imageId,
                    ]
                    self.distributionform.optionsValue5 = [
                      res.data.slaveImages[4].imageSource,
                      res.data.slaveImages[4].imageId,
                    ]
                    self.distributionform.optionsValue6 = [
                      res.data.slaveImages[5].imageSource,
                      res.data.slaveImages[5].imageId,
                    ]
                  }
                })
                self.handleItemChange(self.distributionform.optionsValue7)
              }
            }
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //弹窗step切换
    AddClass(index) {
      let self = this
      // if(index != 2){
      //     return
      // }
      self.distributionform.virtualStepCurrent = index
    },
    // 分配镜像
    // 表单提交
    DistributionFormSave(formName, tag) {
      // tag标记1.保存 2.保存并跳转实验镜像
      let self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {},
            slaveImageIdsArr = []
          // data.chapterIds = self.chapterId
          data.mode = self.distributionform.resource
          data.experimentType = self.distributionform.experimentType
          if (self.distributionform.resource == 1) {
            data.imageId = self.distributionform.optionsValue0[1]
              ? self.distributionform.optionsValue0[1]
              : ''
            data.cpu = self.distributionform.distributedData.cpuValue
            data.ram = self.distributionform.distributedData.ramValue
            // data.gpu = self.distributionform.distributedData.switchValue

            if (data.imageId == '') {
              self.$message.error('请选择镜像')
              return
            }
          } else if (self.distributionform.resource == 2) {
            data.imageId = self.distributionform.optionsValue7[1]
              ? self.distributionform.optionsValue7[1]
              : ''
            data.cpu = self.distributionform.nodeMianData.cpuValue
            data.ram = self.distributionform.nodeMianData.ramValue
            data.gpu = self.distributionform.nodeMianData.switchValue
            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

            if (data.imageId == '') {
              self.$message.error('请选择主节点镜像')
              return
            }

            if (self.distributionform.virtualStepCurrent == 1) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
            } else if (self.distributionform.virtualStepCurrent == 2) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error('请选择从节点2镜像')
                return
              }
            } else if (self.distributionform.virtualStepCurrent == 4) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error('请选择从节点2镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error('请选择从节点3镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error('请选择从节点4镜像')
                return
              }
            } else if (self.distributionform.virtualStepCurrent == 6) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error('请选择从节点2镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error('请选择从节点3镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error('请选择从节点4镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
              if (self.distributionform.optionsValue5[1] == undefined) {
                self.$message.error('请选择从节点5镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
              if (self.distributionform.optionsValue6[1] == undefined) {
                self.$message.error('请选择从节点6镜像')
                return
              }
            }
            data.slaveImageIds = slaveImageIdsArr
          }
          self.$http
            .post('/tes/image-allocation/course/' + self.chapterId, data)
            .then((response) => {
              let res = response.data
              if (res.code == '200') {
                // self.$message({
                //     message: '重选配置成功',
                //     type: 'success'
                // })

                // 镜像分配弹窗隐藏
                self.dialogDistributionFormVisible = false
                // 配置成功调用初始化
                // self.InitConfigVirtual(0)
                self.refreshVirtual(0)
              } else {
                self.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    InitConfigVirtual(index) {
      let self = this
      self.MachineNavTabIndex = 0
      self.VirtualMachineUrl = ''
      // 虚机地址数组
      self.VirtualMachineUrlArr = []
      self.VirtualMachineIdArr = []
      self.fullScreen = false
      self.deskLoading = true
      self.deskLoadingText = '重选配置中'
      self.$http
        .get('/tes/experiment/course/' + self.taskId + '/init')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.mirrorIframeTip = false
            // 初始化虚拟机信息
            // self.VirtualMachineInfo = res.data

            setTimeout(() => {
              self.iframeHeight = $(window).height() - 60
              $('.mirror-iframe, .step-main-mirror').width(
                (1024 / 768) * ($(window).height() - 60)
              )
              $('.jx-virtual-machine-main').height(self.iframeHeight)
              $('.step-main-content').width(
                $(window).width() - $('.step-main-mirror').width()
              )
            }, 800)
            self.deskLoading = false

            // 虚机地址默认设置主节点
            self.VirtualMachineUrl = res.data[index].desktopUrl
            // 虚机地址数组
            self.VirtualMachineUrlArr = res.data
            // 虚机ID
            self.VirtualMachineId = res.data[index].containerId

            // 镜像ID初始化
            self.VirtualImageId = res.data[index].imageId
            let fullData = []
            for (let i = 0; i < res.data.length; i++) {
              self.VirtualMachineIdArr.push(res.data[i].containerId)
              // 如果含有全屏状态
              if (res.data[i].fullScreen) {
                fullData.push(res.data[i].containerId)
                self.VirtualFullScreen(1, fullData)
              }
            }
            self.$message({
              message: '重选配置成功',
              type: 'success',
            })
          } else {
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleItemChange(data) {
      let self = this
      if (data[1]) {
        self.$http
          .get('/tes/image-allocation/image/' + data[1])
          .then((response) => {
            let res = response.data
            if (res.code == '200') {
              self.distributionform.distributionData = res.data
            } else {
              self.$message.error(res.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    // stfp工具
    SftpConfig() {
      let self = this
      self.$http
        .get('/tes/experiment/container/' + self.VirtualMachineId + '/ftp')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            let sftpArr = res.data.split('@')
            self.sftpIp = sftpArr
            self.sftpPort = self.sftpIp[0].split(':')
            self.dialogSftp = true
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 剪贴板字符限制
    CutContentInput() {
      let self = this
      let MirrorTextLength = self.cutData.cutRuleForm.desc.length
      self.cutData.cutRuleForm.descNum = 20000 - MirrorTextLength
    },
    // 剪切板弹窗
    CutDialog() {
      let self = this
      self.dialogCut = true
      self.cutData.cutRuleForm.descNum = 20000
      self.cutData.cutRuleForm.desc = ''
    },
    CutCloseDialog() {
      let self = this
      self.$refs['cutRuleForm'].resetFields()
    },
    // 剪切板表单提交
    cutSubmitForm(formName) {
      let self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = self.$loading({
            lock: true,
            text: '剪切文件提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          self.$http
            .post(
              '/tes/experiment/container/' +
                self.VirtualMachineId +
                '/clipboard',
              {
                content: self.cutData.cutRuleForm.desc,
                contextId: self.taskId,
              },
              { timeout: 5000 }
            )
            .then((response) => {
              let res = response.data
              if (res.code == '200') {
                loading.close()
                self.$message({
                  type: 'success',
                  message: '保存成功!',
                })
                self.dialogCut = false
              } else {
                loading.close()
                self.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.log(err)
              //显示弹窗
              this.dialogVirtualFloag = true
              loading.close()
              self.dialogCut = false
            })
        }
      })
    },
    // 查看分享控制
    ShareControl() {
      let self = this
      self.$http
        .get('/tes/experiment/share/' + self.chapterId + '/config')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.shareData = res.data
            self.dialogShare = true
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 分享保存
    ShareToTeaSave() {
      let self = this
      self.$http
        .post('/tes/experiment/share/' + self.chapterId + '/config', {
          stuToStuSwitch: self.shareData.stuToStuSwitch,
          stuToTeaSwitch: self.shareData.stuToTeaSwitch,
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '保存成功',
              type: 'success',
            })
            self.dialogShare = false
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 文件上传弹窗显示
    UploadFile() {
      let self = this
      self.FileUploadForm.fileName = ''
      self.FileUploadForm.versionFile = ''
      self.dialogFileUpload = true
      $('#version-file-upload').val('')
    },
    // 文件上传清除上传提示文本
    CloseFileUploadDialog() {
      let self = this
      self.FileUploadForm.fileName = ''
      $('#version-file-upload').val('')
    },
    // 上传文件
    getFile($event) {
      let self = this
      let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
      let fileType = $event.target.files[0].name
      fileType = fileType.substring(
        fileType.lastIndexOf('.') + 1,
        fileType.length
      )
      if (!isLt2M) {
        self.$message.error('上传文件大小不能超过 500MB!')
        return false
      }
      self.FileUploadForm.fileName = $event.target.files[0]
      self.FileUploadForm.versionFile = $event.target.files[0].name
    },
    // 保存上传文件
    UploadSave(form) {
      let self = this
      if (self.FileUploadForm.fileName == '') {
        self.$message.error('请上传文件')
        return
      }
      self.contentLoading = self.$loading({
        lock: true,
        text: '文件上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let formData = new FormData()
      formData.append('file', self.FileUploadForm.fileName)
      self.$http
        .post(
          '/tes/experiment/container/' + self.VirtualMachineId + '/upload',
          formData,
          { headers: { 'Content-Type': 'multipart/form-data' } }
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '上传成功',
              type: 'success',
            })
            self.$refs[form].resetFields()
            self.dialogFileUpload = false
            self.contentLoading.close()
          } else {
            self.contentLoading.close()
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 分享桌面
    ShareDesk() {
      let self = this
      self.ShareDeskData.newOptions = [
        {
          value: '全选',
          label: '全选',
        },
      ]
      self.ShareDeskData.shareValue = []
      self.$http
        .get('/tes/experiment/share/' + self.chapterId + '/users')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (res.data.length == 0) {
              self.ShareDeskData.newOptions = []
            }
            for (let i = 0; i < res.data.length; i++) {
              let shareJson = {}
              shareJson.label = res.data[i].username
              shareJson.value = res.data[i].userId
              self.ShareDeskData.newOptions.push(shareJson)
            }
            self.dialogShareDesktop = true
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    DELONE(str, arr) {
      let index = arr.indexOf(str)
      arr.splice(index, 1)
      return arr
    },
    // 分享保存
    ShareSave() {
      let self = this

      let newOptions = self.ShareDeskData.shareValue
      if (self.ShareDeskData.shareValue.length > 1) {
        let index = newOptions.indexOf('全选')
        newOptions.splice(index, 1)
      }

      self.$http
        .post('/tes/experiment/share/' + self.chapterId, {
          users: newOptions,
          controllable: self.ShareDeskData.shareRadio,
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '分享成功',
              type: 'success',
            })
            self.dialogShareDesktop = false
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 分享全选
    selectAll(val) {
      let self = this
      let allValues = []

      //保留所有值
      for (let item of self.ShareDeskData.newOptions) {
        allValues.push(item.value)
      }
      // 用来储存上一次的值，可以进行对比
      const oldVal =
        self.ShareDeskData.oldOptions.length === 1
          ? []
          : self.ShareDeskData.oldOptions[1]

      // 若是全部选择
      if (val.includes('全选')) self.ShareDeskData.shareValue = allValues

      // 取消全部选中  上次有 当前没有 表示取消全选
      if (oldVal.includes('全选') && !val.includes('全选'))
        self.ShareDeskData.shareValue = []

      // 点击非全部选中  需要排除全部选中 以及 当前点击的选项
      // 新老数据都有全部选中
      if (oldVal.includes('全选') && val.includes('全选')) {
        const index = val.indexOf('全选')
        val.splice(index, 1) // 排除全选选项
        self.ShareDeskData.shareValue = val
      }

      //全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
      if (!oldVal.includes('全选') && !val.includes('全选')) {
        if (val.length === allValues.length - 1)
          self.ShareDeskData.shareValue = ['全选'].concat(val)
      }

      //储存当前最后的结果 作为下次的老数据
      self.ShareDeskData.oldOptions[1] = self.ShareDeskData.shareValue
    },
    // 关闭分享
    CloseShare() {
      let self = this
      self.dialogCloseShare = true
    },
    DialogCloseShareSave() {
      let self = this
      self.$http
        .get('/tes/experiment/share/' + self.chapterId + '/close')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.dialogCloseShare = false
            self.$message({
              message: '关闭成功',
              type: 'success',
            })
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 跳转分享虚机
    NotesLink(item) {
      let self = this
      let newWindow = window.open()
      let routeData = self.$router.resolve({
        name: 'ShareVirtualMachine',
        query: {
          courseId: item.userId,
          chapterId: item.chapterId,
        },
      })
      // window.open(routeData.href, '_blank')
      newWindow.location.href = routeData.href
    },
    // 关闭分享共享虚机信息
    CloseNotes(item, index) {
      let self = this
      self.$http
        .delete('/tes/experiment/share/' + item.userId + '/' + item.chapterId)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.notesData.splice(index, 1)
            if (self.notesData.length == 0) {
              self.noteBottom = -172
            }
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 实验截图
    ExperimentScreenshot() {
      let self = this
      var vir = document.getElementById(
        'VirtualMachineIframe' + self.VirtualMachineId
      )
      self.dialogScreenshotUrl = self
        .convertCanvasToImage(
          vir.contentWindow.document.getElementsByTagName('canvas')[0]
        )
        .getAttribute('src')

      self.$http
        .post('/tes/base64/file-save', {
          base64Info: self.dialogScreenshotUrl,
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.dialogScreenshotCopyUrl = res.data
            self.dialogScreenshot = true
          }
        })
    },
    convertCanvasToImage(canvas) {
      let image = new Image()
      image.crossOrigin = 'anonymous'
      image.src = canvas.toDataURL('image/png')
      return image
    },
    // 实验截图复制
    dialogScreenshotCopy() {
      let self = this
      var clipboard = new self.Clipboard('.dialog-screenshot .button-style')
      clipboard.on('success', (e) => {
        self.$message({
          message: '复制成功，请在编辑器粘贴',
          type: 'success',
        })
        self.dialogScreenshot = false
        e.clearSelection()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    // 实验截图保存下载图片
    dialogScreenshotSave() {
      let self = this
      self.downloadFile('截图.png', self.dialogScreenshotUrl)
    },
    // 下载
    downloadFile(fileName, content) {
      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(content) //new Blob([content]);

      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)

      // aLink.dispatchEvent(evt);
      aLink.dispatchEvent(
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window,
        })
      )
    },
    // base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length

      let uInt8Array = new Uint8Array(rawLength)

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    // 教师目标
    TargetDialog() {
      let self = this
      self.dialogtargetDrag = true
      self.$nextTick(() => {
        $('.markdown-body p img').on('click', function () {
          self.biggerImgPath = $(this).attr('src')
          self.bigger = true
        })
      })
    },
    // 竞赛题目弹窗
    HandbookDialog() {
      let self = this
      self.dialogHandbookDrag = true
      self.$nextTick(() => {
        $('.markdown-body p img').on('click', function () {
          self.biggerImgPath = $(this).attr('src')
          self.bigger = true
        })
      })
    },
    // 关闭视频弹窗
    closeVideoDialog() {
      let self = this
      self.dialogVideoDrag = false
      self.$nextTick(() => {
        if (self.myVideo4) {
          self.myVideo4.pause()
        }
      })

      self.experimentDialogVideoData3 = ''
    },
    // 视频拖拽弹窗
    HandVideoDialog() {
      let self = this
      self.dialogVideoDrag = true
      self.$http
        .get(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/detail/resource?type=5&stepChapterId=' +
            self.stepChapterId
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (
              res.data.experimentVideo != undefined &&
              res.data.experimentVideo.displayVersion != undefined &&
              res.data.experimentVideo.displayVersion.length > 0 &&
              res.data.experimentVideo.displayVersion[0].filePath !=
                undefined &&
              res.data.experimentVideo.displayVersion[0].filePath != ''
            ) {
              //self.experimentVideoData3 = 'https://www.runoob.com/try/demo_source/movie.mp4'
              self.experimentVideoData3 =
                res.data.experimentVideo.displayVersion[0].filePath

              this.$nextTick(() => {
                self.myVideo4 = videojs('videoStep33', {
                  bigPlayButton: true,
                  textTrackDisplay: false,
                  posterImage: true,
                  errorDisplay: false,
                  controls: true,
                  playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放配置
                })
                self.myVideo4.src(self.experimentVideoData3)
                self.myVideo4.load(self.experimentVideoData3)
              })
              //self.flagvideo = true
            } else {
              self.flagvideo = false
              self.experimentVideoData3 = ''
              if (self.myVideo4 != '') {
                self.myVideo4.load('')
              }
              var videoPlayer2 = $('#video').get(0)
              if (typeof videoPlayer2 != 'undefined') {
                var myPlayer2 = videojs('video')
                myPlayer2.dispose()
              }
            }
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      // let self = this
      // self.dialogVideoDrag = true

      // self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=5').then(response => {
      //     let res = response.data
      //     if(res.code == '200'){
      //         if(res.data.experimentVideo.displayVersion.length > 0){
      //             self.experimentDialogVideoData = res.data.experimentVideo.displayVersion[0].filePath
      //         }
      //     }else{
      //         self.$message.error(res.message)
      //     }
      // }).catch(err => {
      //     console.log(err)
      // })
    },

    // 实验笔记拖拽弹窗
    HandNoteDialog() {
      let self = this
      self.dialogHandNoteDrag = true
      self.$http
        .get(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/resource/notes?notesType=3'
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$refs.HandNoteDialog.value = res.data
            self.$refs.HandNoteDialog.toolbars = self.toolbarsMav
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 虚拟共享信息
    NoteSelect() {
      let self = this
      if (self.noteBottom == -172) {
        self.$http
          .get('/tes/experiment/share')
          .then((response) => {
            let res = response.data
            if (res.code == '200') {
              if (res.data.length == 0) {
                self.$message({
                  message: '暂时没有信息',
                  type: 'warning',
                })
              } else {
                self.notesData = res.data
                self.noteBottom = 40
              }
            } else {
              self.$message.error(res.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        self.noteBottom = -172
      }
    },
    greet(val) {
      this.val = val
    },
    // 虚机右侧菜单显示隐藏
    MirrorArrowFn() {
      let self = this
      if (self.mirrorRightWidth == -144) {
        self.mirrorRightWidth = 0
      } else {
        self.mirrorRightWidth = -144
      }
    },
    checkedFn() {
      let self = this
      //首先el-table添加ref="multipleSelection"引用标识
      self.DisplayHideData.forEach((row) => {
        if (!row.showed) {
          self.$refs.multipleTable.toggleRowSelection(row, true)
        } else {
          self.$refs.multipleTable.toggleRowSelection(row, false)
        }
      })
    },
    handleSelectAllChange(selection) {
      let self = this
      self.DisplayHideData.forEach((row) => {
        if (selection.length == 0) {
          row.showed = true
        } else {
          row.showed = false
        }
      })
    },
    handleSelectionChange(val) {
      let valArr = []
      for (let i = 0; i < val.length; i++) {
        valArr.push(val[i].id)
      }
      this.multipleSelection = valArr
    },
    toggleRowClick(selection, row) {
      row.showed = !row.showed
    },
    // 学生手册显隐
    StudentDisplayHide() {
      let self = this
      //专科版本添加 参数types=4 后台liixn
      self.$http
        .post(
          '/tes/course/' +
            self.courseId +
            '/chapter/authority?types=2,3,4&operatingType=2',
          [
            {
              resourcesType: 8,
              names: ['实验手册'],
            },
          ]
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.dialogDisplayHide = true
            // 学生手册表格赋值
            self.DisplayHideData = res.data
            // 显示学生手册显隐弹窗
            self.$nextTick(() => {
              self.checkedFn() //每次更新了数据，触发这个函数即可。
            })
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    tableRowClassName({ row, rowIndex }) {
      let self = this
      if (rowIndex === self.indexOfFn(self.DisplayHideData, self.chapterId)) {
        return 'blue-row'
      }
      return ''
    },
    indexOfFn(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == item) {
          return i
        }
      }
    },
    // 学生手册显隐保存
    DisplayHideSave() {
      let self = this
      let dataArr = []
      // 拼装后台所要数据格式
      for (let i = 0; i < self.DisplayHideData.length; i++) {
        let DisplayHideJson = {}
        DisplayHideJson.chapterId = self.DisplayHideData[i].id
        DisplayHideJson.resourcesType = 8
        DisplayHideJson.permission = [
          {
            name: '实验手册',
            show: true,
          },
        ]
        for (let j = 0; j < self.multipleSelection.length; j++) {
          if (self.multipleSelection[j] == self.DisplayHideData[i].id) {
            DisplayHideJson.permission = [
              {
                name: '实验手册',
                show: false,
              },
            ]
          }
        }
        dataArr.push(DisplayHideJson)
      }
      self.$http
        .put(
          '/tes/course/' + self.courseId + '/resource-right?operatingType=2',
          dataArr
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '设置成功',
              type: 'success',
            })
            // 关闭学生手册显示弹窗
            self.dialogDisplayHide = false
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 画笔
    drawShowEvent() {
      // 画布显示
      $('#drawBox,#drawCanvas').show()
      this.drawEvent()
      $('.colorRed').css({
        background: '#ffffff',
        height: '8px',
        width: '8px',
        border: '4px solid #ff0f00',
      })
    },
    drawEvent() {
      //绘图
      let canvas = document.getElementById('drawCanvas')
      let obj = canvas.getContext('2d')
      let colorchoose = this.penColor
      let widthchoose = this.penSize
      let typechoose = $('.type')
      let back = $('.recall')
      let clear = $('.clean')
      let exit = $('.exit')
      let linewidth = '1'
      let cutflag = false
      let screenWidth = document.documentElement.clientWidth
      let screenHeight = document.documentElement.clientHeight
      let width = screenWidth
      let height = screenHeight
      canvas.width = width
      canvas.height = height
      let iscut = true
      let style = 'stroke'
      let color = this.penColor
      let arr = []
      let self = this
      // 撤销
      back.click(function () {
        arr.pop()
        obj.clearRect(0, 0, width, height)
        if (arr.length > 0) {
          obj.putImageData(arr[arr.length - 1], 0, 0, 0, 0, width, height)
        }
      })
      // 清除
      clear.click(function () {
        arr = []
        obj.clearRect(0, 0, width, height)
      })
      //退出
      exit.click(function () {
        arr = []
        obj.clearRect(0, 0, width, height)
        $('.type').css({ color: '#474747', 'border-color': '#474747' })
        $('.pen').css('color', '#1277eb')
        $('.point>span').css('background', '#dddddd')
        $('.point1>span').css('background', '#1aad19')
        $('.colorBtn').attr('style', '')
        $('.colorRed').css({
          background: '#ffffff',
          height: '8px',
          width: '8px',
          border: '4px solid #ff0f00',
        })
        self.drawType = 'pen'
        self.penSize = '6'
        self.penColor = '#ff0f00'
        $('#drawBox,#drawCanvas').hide()
      })
      let x, y, w, h
      let lx, ly, lw, lh
      let cutdata

      canvas.onmousedown = function (e) {
        x = e.offsetX
        y = e.offsetY

        if (self.drawType == 'pen') {
          obj.beginPath()
          obj.moveTo(x, y)
        }
        let draw = new Draw(obj, {
          type: style,
          color: self.penColor,
          width: self.penSize,
        }) //实例化构造函数
        canvas.onmousemove = function (e) {
          w = e.offsetX
          h = e.offsetY
          if (self.drawType != 'eraser') {
            obj.clearRect(0, 0, width, height)
            if (arr.length != 0) {
              obj.putImageData(arr[arr.length - 1], 0, 0, 0, 0, width, height)
            }
          }
          if (cutflag && self.drawType == 'cut') {
            if (iscut) {
              obj.clearRect(lx, ly, lw - lx, lh - ly)
            }
            var nx = lx + (w - x)
            var ny = ly + (h - y)
            obj.putImageData(cutdata, nx, ny)
          } else if (self.drawType == 'poly') {
            draw[type](x, y, w, h, n)
          } else {
            draw[self.drawType](x, y, w, h)
          }
        }
        document.onmouseup = function () {
          canvas.onmousemove = null
          document.onmouseup = null

          arr.push(obj.getImageData(0, 0, width, height))
        }
      }
    },
    penColorChange(val, name) {
      //获取绘图颜色
      this.penColor = val
      $('.colorBtn').attr('style', '')
      $('.' + name).css({
        background: '#ffffff',
        height: '8px',
        width: '8px',
        border: '4px solid' + this.penColor,
      })
    },
    penSizeChange(val, name) {
      //获取绘图大小
      this.penSize = val
      $('.point>span').css('background', '#dddddd')
      $('.' + name + '>span').css('background', '#1aad19')
    },
    drawTypeChange(val, name) {
      //绘图类型
      this.drawType = val
      if (this.drawType == 'pen') {
        $('.type').css({ color: '#474747', 'border-color': '#474747' })
        $('.pen').css('color', '#1277eb')
      } else {
        $('.type').css({ color: '#474747', 'border-color': '#474747' })
        $('.' + name).css('border-color', '#1277eb')
      }
    },

    // 二期需求
    // 初始化剪切板开关状态
    initClipboarFalg() {
      let self = this
      self.$http
        .get(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/ClipboardFalg'
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.CutSwitch = res.data == 0 ? true : false
            self.contentText = !self.CutSwitch
              ? '点击开启学生端剪切板功能'
              : '点击关闭学生端剪切板功能'
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    closedialogTip() {
      //调用是查询是开启还是关闭
      this.initClipboarFalg()
    },
    //关闭
    dialogTipSave() {
      let self = this
      self.$http
        .put(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/falg',
          {
            falg: !self.CutSwitch ? true : false,
            type: this.flagSwitch == 1 ? 1 : 2,
          }
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              type: 'success',
              message: '保存成功!',
            })
            this.dialogTip = false
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 开关
    closeSwitch() {
      this.contentText = !this.CutSwitch
        ? '点击开启学生端剪切板功能'
        : '点击关闭学生端剪切板功能'
      this.dialogTip = true
    },

    //添加专科版本建设
    //初始化详情列表
    DetailData() {
      let self = this
      // self.$http
      //   .get('/tes/course/' + self.courseId + '/chapter/list')
      getTaskListTSCP(this.courseId)
        .then((res) => {
          if (res.code == '200') {
            self.appList = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //点击关闭
    deleteFns() {
      $('.detailBox').hide()
    },
    //点击详情
    detalList() {
      let self = this
      let IndexValue
      for (let i = 0; i < self.appList.length; i++) {
        if (
          JSON.stringify(self.appList[i].chapterId).includes(
            Number(self.chapterId)
          )
        ) {
          IndexValue = i
        }
      }
      this.activeName = IndexValue
      //最近学习索引等于打开这项
      this.openFlag = IndexValue
      this.scrollFn()
      //判断屏幕分辨率
      if (
        window.screen.height <= 900 ||
        $('.jx-virtual-machine-main').height() <= 715
      ) {
        this.scrollFn2()
      }
      $('.detailBox').stop().slideToggle()
    },
    //进入详情
    EnteDetails(item, itembig, items) {
      if (item.vmConfig) {
        this.$router.replace({
          path: '/Teaching/MyCourses/VirtualMachine',
          query: {
            courseName: this.$route.query.courseName,
            taskName: item.name,
            courseId: this.courseId,
            taskId: item.taskId,
            chapterId: item.chapterId,
          },
        })
        location.reload()
      } else {
        this.$router.replace({
          path: '/Teaching/MyCourses/VirtualMachineManual',
          query: {
            courseId: this.courseId,
            chapterId: item.chapterId,
            taskId: item.taskId,
          },
        })
      }
      let self = this
      // if (itembig.levels == 2) {
      //   self.stepType = itembig.stepTypeStr
      // } else if (itembig.levels == 3) {
      //   self.stepType = items.stepTypeStr
      // }
      self.clickId = item.id
      //如果为真，可以跳转
      // if (item.show) {
      //   if (item.name == '理论学习' || item.name == '任务引导') {
      //     self.$router.push({
      //       path: '/Teaching/MyCourses/CoursewareDetail',
      //       query: {
      //         courseId: self.courseId,
      //         chapterId: item.id,
      //         taskId: self.chapterId,
      //         classId: self.classId,
      //         singleChaper: item.id,
      //       },
      //     })
      //   } else if (item.name == '教学资源') {
      //     self.$router.push({
      //       path: '/Teaching/MyCourses/CourseResourceDetail',
      //       query: {
      //         courseId: self.courseId,
      //         chapterId: item.id,
      //         classId: self.classId,
      //         singleChaper: item.id,
      //       },
      //     })
      //   } else if (item.name == '备课材料') {
      //     self.$router.push({
      //       path: '/Teaching/MyCourses/CourseMaterialDetail',
      //       query: {
      //         courseId: self.courseId,
      //         chapterId: item.id,
      //         classId: self.classId,
      //         singleChaper: item.id,
      //       },
      //     })
      //   } else if (item.name == '实验学习' || item.experimentCourseFlag) {
      //     if (self.userStatus == 'NOT_CREATE_CLASS') {
      //       self.$router.push({
      //         path: '/Teaching/MyCourses/VirtualMachineManual',
      //         query: {
      //           courseId: self.courseId,
      //           chapterId: item.id,
      //           classId: self.classId,
      //           stepTypeStr: self.stepType,
      //           singleChaper: item.id,
      //         },
      //       })
      //     } else if (self.userStatus == 'EXIST_CLASS') {
      //       self.$http
      //         .get(
      //           '/tes/image-allocation/course/' + self.courseId + '/' + item.id
      //         )
      //         .then((response) => {
      //           let res = response.data
      //           if (res.code == '200') {
      //             if (res.data.allocated) {
      //               self.$http
      //                 .get('/tes/experiment/course/' + item.id + '/prompt')
      //                 .then((response) => {
      //                   let res = response.data
      //                   if (res.code == '200') {
      //                     if (res.data) {
      //                       // 弹窗是否强制跳转
      //                       self.dialogVirtual = true
      //                     } else {
      //                       if (
      //                         self.roles == 'TEACHER' ||
      //                         self.roles == 'MARKET_TEACHER' ||
      //                         self.roles == 'UNIVERSITY_TEACHER'
      //                       ) {
      //                         // 跳转实验页

      //                         self.$router.push({
      //                           path: '/Teaching/MyCourses/VirtualMachine',
      //                           query: {
      //                             courseId: self.courseId,
      //                             chapterId: item.id,
      //                             classId: self.classId,
      //                             stepTypeStr: self.stepType,
      //                             singleChaper: item.id,
      //                           },
      //                         })

      //                         window.location.reload()
      //                       } else if (self.roles == 'STUDENT') {
      //                         // 跳转实验页
      //                         self.$router.push({
      //                           path: '/Teaching/MyCourses/STVirtualMachine',
      //                           query: {
      //                             courseId: self.courseId,
      //                             chapterId: item.id,
      //                             classId: self.classId,
      //                             stepTypeStr: self.stepType,
      //                             singleChaper: item.id,
      //                           },
      //                         })
      //                       }
      //                     }
      //                   } else {
      //                     self.$message.error(res.message)
      //                   }
      //                 })
      //                 .catch((err) => {
      //                   console.log(err)
      //                 })
      //             } else {
      //               self.$router.push({
      //                 path: '/Teaching/MyCourses/VirtualMachineManual',
      //                 query: {
      //                   courseId: self.courseId,
      //                   chapterId: item.id,
      //                   classId: self.classId,
      //                   stepTypeStr: self.stepType,
      //                   singleChaper: item.id,
      //                 },
      //               })
      //             }
      //           } else {
      //             self.$message.error(res.message)
      //           }
      //         })
      //         .catch((err) => {
      //           console.log(err)
      //         })
      //     }
      //   } else if (item.name == '随堂练习') {
      //     //分为学生和老师身份
      //     if (self.roles == 'STUDENT') {
      //       if (self.userStatus == 'NOT_CREATE_CLASS') {
      //         self.typesStatus = 1 //没有班级时传1  不显示提交按钮
      //       } else {
      //         self.typesStatus = 2 //有班级时传2 显示提交按钮
      //       }
      //       self.$router.push({
      //         name: 'SPractice',
      //         query: {
      //           courseId: self.courseId,
      //           chapterId: item.id,
      //           typesStatus: self.typesStatus,
      //           classId: self.classId,
      //           singleChaper: self.clickId,
      //         },
      //       })
      //     } else if (
      //       self.roles == 'TEACHER' ||
      //       self.roles == 'MARKET_TEACHER' ||
      //       self.roles == 'UNIVERSITY_TEACHER'
      //     ) {
      //       self.$router.push({
      //         name: 'TPractice',
      //         query: {
      //           courseId: self.courseId,
      //           chapterId: item.id,
      //           classId: self.classId,
      //           singleChaper: self.clickId,
      //         },
      //       })
      //     }
      //   }
      // }
    },
    //自动到最近学习
    scrollFn() {
      this.$nextTick(() => {
        let topValue = $('.studying').parent().offset().top
        if (topValue > 790) {
          $('.detailBox').animate(
            { scrollTop: $('.studying').parent().offset().top - 100 },
            20
          )
        }
      })
    },
    scrollFn2() {
      this.$nextTick(() => {
        let h = $('.jx-virtual-machine-main').height()
        let topValue = $('.studying').parent().offset().top
        if (topValue > h + 20) {
          $('.detailBox').animate(
            { scrollTop: $('.studying').parent().offset().top - 100 },
            20
          )
        }
      })
    },
    // 是否添加过班级
    ClassInit() {
      let self = this
      self.$http
        .get('/tes/course/' + self.courseId + '/user-status')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.userStatus = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 确定跳转实验详情
    VirtualSave() {
      let self = this
      if (
        self.roles == 'TEACHER' ||
        self.roles == 'MARKET_TEACHER' ||
        self.roles == 'UNIVERSITY_TEACHER'
      ) {
        // 跳转实验页
        self.$router.push({
          path: '/Teaching/MyCourses/VirtualMachine',
          query: {
            courseId: self.courseId,
            chapterId: self.clickId,
            classId: self.classId,
            stepTypeStr: self.stepType,
            singleChaper: self.clickId,
          },
        })
        window.location.reload()
      } else if (self.roles == 'STUDENT') {
        self.$router.push({
          path: '/Teaching/MyCourses/STVirtualMachine',
          query: {
            courseId: self.courseId,
            chapterId: self.clickId,
            classId: self.classId,
            stepTypeStr: self.stepType,
            singleChaper: self.clickId,
          },
        })
      }
      self.dialogVirtual = false
    },
    //列表
    handleChange(val) {
      //val 索引
      this.openFlag = val
      let vals = String(val)
      this.openFlag = vals
    },
  },
}
</script>
<style >
.cut-dialog .el-dialog .el-form .el-textarea textarea {
  height: 200px;
  resize: none;
}
</style>
<style scoped>
.dialogTip {
  text-align: center;
  margin-top: 40px;
}
.dialogTip p {
  margin-bottom: 25px;
}
.dialogTip p i {
  font-size: 18px;
  color: #385899;
  vertical-align: -webkit-baseline-middle;
}
.el-dialog__wrapper {
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2);
}

/* 全屏下的样式 */
.fullSide {
  height: 100%;
  padding: 0 10px;
  background: #e5e4e5;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #cfcfce;
}
.fullSide ul {
  margin-top: 60px;
}
.fullSide li {
  text-align: center;
  margin: 37px 0;
  cursor: pointer;
}
.fullSide li i {
  color: #989898;
  font-size: 16px;
}
.fullSide li p {
  color: #989898;
  margin-top: 5px;
  font-size: 12px;
}
.fullSide li:hover p {
  color: #727272;
}
.fullSide li:hover i {
  color: #727272;
}
#note-editor >>> .fullscreen {
  z-index: 99999 !important;
}
.forbidden-btn {
  width: 90px;
  height: 32px;
  border: 1px solid #999999;
  border-radius: 20px;
  color: #999999;
  cursor: pointer;
  /* padding: 0 16px; */
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  line-height: 32px;
}
/* 步骤滚动条  */
#spaceHeight {
  overflow-y: scroll;
}
#spaceHeight::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

#spaceHeight::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ccc; /*滚动条颜色*/
}

#spaceHeight::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}

.video-js >>> .vjs-poster {
  background-size: cover;
}
.el-button--small,
.el-button--small.is-round {
  padding: 7px 21px;
  font-size: 14px;
}
.button-style {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.courseName2 {
  position: relative;
}

.courseName2 .icon-lock {
  position: absolute;
  right: -6px;
  top: 3px;
}

.el-collapse-item__header .collapsTitle2 .icon-lock {
  position: absolute;
  right: 11px;
  top: 3px;
}

.stepsTitle {
  border-bottom: 1px solid #e9e9e9;
  line-height: 60px;
  height: 60px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  position: sticky;
  top: 0px;
  z-index: 9;
  background: #fff;
  margin-top: -1px;
}
#videoSteps {
  display: none;
}
.video-js {
  width: 100%;
  height: 450px;
}
.el-select >>> .el-select__tags-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 86px;
  display: inline-block;
  vertical-align: -5px;
}
/* 专科版本 */
.dialog-virtual .el-dialog__footer {
  text-align: center;
}
.blocks::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.blocks::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 50px;
}
.blocks {
  overflow-y: scroll;
  max-height: 700px;
}
.el-collapse {
  border: none;
}
.el-collapse-item >>> .el-collapse-item__header {
  background: #2d3136;
  color: #fff;
  border-bottom: none;
  text-align: center;
  position: relative;
}
.el-collapse-item >>> .el-icon-arrow-right {
  display: none;
}
.el-collapse-item >>> .el-collapse-item__content {
  background: #26292c;
  color: #a2a3a4;
  padding: 5px 20px;
}
.el-collapse-item__content > div {
  padding: 4px 0;
}
.el-collapse-item >>> .el-collapse-item__wrap {
  border-bottom: none;
}
</style>
<style scoped lang="scss">
.dialog-content {
  text-align: center;
  i {
    font-size: 50px;
    color: #d6d6d6;
    display: block;
    margin-top: 25px;
  }
  p {
    font-size: 14px;
    text-align: center;
    line-height: 18px;
  }
  .handbook-item {
    text-align: center;
    margin-top: 30px;
  }
}

.bott {
  margin-bottom: 80px;
}
//步骤
.mask-bg {
  width: 250px;
  background: #fff;
  z-index: 999;
  position: fixed;
  height: 100%;
  left: -100%;
  top: 60px;
  transition: left 0.4s;
  -moz-transition: left 0.4s; /* Firefox 4 */
  -webkit-transition: left 0.4s; /* Safari 和 Chrome */
  clear: both;
  ul {
    padding: 20px 10px;
    li {
      line-height: 50px;
      height: 50px;
      padding-left: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.mask {
  background: #7c7c7c;
  position: fixed;
  width: 100%;
  top: 60px;
  height: 100%;
  left: 0px;
  opacity: 0;
  display: none;
  z-index: 9;
}
.mask-bg .activeSteep {
  color: #1277eb;
}
.foot-content {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0%;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
  z-index: 999;

  .nextvpage {
    margin-right: 20px;
    margin-left: 10px;
  }
  .icon-gengduo {
    font-size: 22px;
    padding-top: 8px;
    padding-left: 15px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
@import './../../../styles/layout/color_variables';

.item-btn-tooltip.is-light {
  border: none;
}
#jx-experiment-virtual-machine {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fff;
  // 绘画盒子
  .styleactive {
    color: #ffa800;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(255, 232, 95, 0.77);
  }
  #drawCanvas {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    display: none;
  }

  #drawBox {
    width: 320px;
    height: 70px;
    position: absolute;
    z-index: 10;
    top: 50px;
    right: 95px;
    background: $white;
    border-radius: 5px;
    font-size: $fs16;
    box-shadow: 3px 0px 21px rgba(0, 0, 0, 0.5);
    display: none;
    i {
      float: left;
      height: 18px;
      margin-top: 26px;
      cursor: pointer;
      margin-left: 25px;
      color: #474747;
    }
    .pen {
      color: #1277eb;
    }
    .squre {
      width: 20px;
      border: 1px solid $title-gray;
      height: 16px;
    }
    .circle {
      width: 16px;
      border: 1px solid $title-gray;
      height: 16px;
      border-radius: 50%;
    }
    .pen,
    .recall {
      font-size: 18px;
      margin-top: 31px;
    }
    #penOption {
      height: 44px;
      width: 230px;
      position: absolute;
      top: 80px;
      left: 10px;
      div:nth-of-type(1) {
        width: 0;
        height: 0;
        border-top: 0 solid transparent;
        border-bottom: 8px solid white;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        margin: 0 auto;
      }
      div:nth-of-type(2) {
        background: $white;
        border-radius: $br5;
        height: 36px;
        width: 230px;
        margin: 0;
        .colorBtn {
          height: 16px;
          width: 16px;
          margin: 10px 0 0 12px;
        }
        .colorRed {
          background: #ff0f00;
        }
        .colorYel {
          background: #ffbe00;
        }
        .colorBul {
          background: #1a9bff;
        }
        .colorGre {
          background: #1aad19;
        }
        .colorBla {
          background: #4d4d4d;
        }
        .point1,
        .point2,
        .point3 {
          width: 14px;
          height: 14px;
          margin: 11px 0 0 12px;
        }
        .point1 {
          span {
            background: #1aad19;
            border-radius: $br50;
            height: 6px;
            width: 6px;
            display: block;
            margin: 5px;
          }
        }
        .point2 {
          span {
            background: $gray;
            border-radius: $br50;
            height: 10px;
            width: 10px;
            display: block;
            margin: 2px;
          }
        }
        .point3 {
          span {
            background: $gray;
            border-radius: $br50;
            height: 14px;
            width: 14px;
            display: block;
            margin: 0;
          }
        }
      }
    }
  }
  .jx-main-content {
    width: 100%;
    // min-height: 600px;
    .jx-content-tips {
      text-align: center;
      margin-top: 100px;
    }
  }
  .el-dialog__footer {
    text-align: center;
    .dialog-footer {
      .el-button {
        width: 90px;
      }
    }
  }
  .jx-virtual-machine-header {
    height: 60px;
    line-height: 60px;
    background: #101937;
    color: $white;
    overflow: hidden;
    .jx-virtual-machine-header-logo {
      margin-left: 23px;
      font-size: 16px;
      line-height: 60px;
    }
    .jx-virtual-machine-nav {
      margin: 20px 0 0 30px;
      float: left;
      height: 40px;
      line-height: 40px;
      span {
        width: 90px;
        color: $white;
        cursor: pointer;
        text-align: center;
        border-radius: 5px 5px 0 0;
        transition: 0.3s;
        // &:hover{
        //     background: $white;
        //     color: #101937;
        // }
        &.active {
          background: $white;
          color: #101937;
        }
      }
    }
    .jx-virtual-machine-nav2 {
      // width: 50%;
      // float: right;
      @extend .jx-virtual-machine-nav;
    }
    .jx-virtual-machine-header-info {
      margin-right: 40px;
      height: 60px;
      span {
        vertical-align: top;
        cursor: pointer;
        color: #bbb;
      }
      i {
        font-size: 16px;
        margin-left: 12px;
        cursor: pointer;
        color: #bbb;
        vertical-align: -webkit-baseline-middle;
      }
      &:hover {
        span {
          color: #fff;
        }
        i {
          color: #fff;
        }
      }
    }
  }
  .jx-virtual-machine-main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .tab-main {
      .jx-main-content {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
      }
    }
    .step-main-content {
      height: 100%;
      background: #fff;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        width: 5px;
        height: 0;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
      }
      .step-main-content-text {
        width: 100%;
        background: $white;
        margin-top: 10px;
        overflow: hidden;
        .display-hide-btn {
          float: right;
          margin: 10px 10px 20px 0;
        }
        .markdown-body {
          float: left;
        }
      }
      .step-main-btn-box {
        overflow: hidden;
        padding: 12px 16px 15px 15px;
        text-align: right;
        i {
          color: #385899;
          font-size: 16px;
          line-height: 16px;
          vertical-align: top;
          cursor: pointer;
        }
      }
      .step-main-btn-group {
        text-align: center;
        margin-top: 20px;
        button {
          width: 90px;
          &:first-child {
            // background: $btn-blue;
            // color: #fff;
            margin-right: 5px;
          }
        }
      }
    }
    .step-main-mirror {
      position: relative;
      width: 65%;
      height: 100%;
      // overflow-x: auto;
      // &::-webkit-scrollbar {
      //     width: 6px;
      // }
      // &::-webkit-scrollbar-thumb {
      //     background: #4d5368;
      //     border-radius: 6px;
      // }
      .mirror-iframe {
        border-left: 1px solid rgba(0, 0, 0, 0.07);
      }
      .mirror-iframe-tip {
        text-align: center;
        img {
          margin-top: 20%;
        }
        .mirror-iframe-tip-text {
          display: block;
          font-size: 16px;
          color: #727272;
          margin: 28px 0 18px;
        }
      }
      .step-main-mirror-dialog {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 144px;
        box-sizing: border-box;
        background: #2e2f33;
        transition: 0.3s;
        .step-main-mirror-dialog-block {
          height: 100%;
          overflow-x: scroll;
          padding: 0 24px;
          &::-webkit-scrollbar {
            width: 3px;
            height: 0;
          }

          &::-webkit-scrollbar-thumb {
            background: $white;
          }
        }
        #time-header-dialog {
          .quit-machine {
            width: 100px;
            height: 26px;
            border-radius: 13px;
            background: #1277eb;
            display: flex;
            align-items: center;
            color: #ffffff;
            font-size: 14px;
            cursor: pointer;
            margin: 5px auto 25px;
            justify-content: center;
            &:hover {
              opacity: 0.9;
            }
            img {
              margin-right: 5px;
            }
          }
          .zujian-time {
            text-align: center;
          }
          .shiyanti {
            margin: 25px 0 5px 0;
            font-size: 15px;
            white-space: nowrap;
          }
        }

        .mirror-dialog-header {
          font-size: 14px;
          line-height: 18px;
          color: $white;
          padding: 20px 0;
          h2 {
            font-weight: normal;
            font-size: 16px;
            margin-bottom: 10px;
          }
          span {
            font-size: 18px;
            line-height: 18px;
            font-weight: 400;
            vertical-align: bottom;
          }
        }
        .mirror-dialog-item {
          border-top: solid 1px rgba(255, 255, 255, 0.3);
          padding: 15px 0;
          .item-btn {
            position: relative;
            line-height: 40px;
            font-size: 14px;
            color: $white;
            cursor: pointer;
            &:hover {
              color: #1277eb;
            }
            span {
              cursor: pointer;
              &:hover {
                color: #1277eb;
              }
            }
            i {
              // float: left;
              width: 22px;
              text-align: left;
              // margin-right: 5px;
              display: inline-block;
              vertical-align: -webkit-baseline-middle;
              &.icon-guanbifenxiang {
                font-size: 14px;
              }
              &:hover {
                color: #1277eb;
              }
            }
            .el-switch {
              width: 19px;
              height: 13px;
              margin-left: 5px;
              &.is-checked {
                .el-switch__core {
                  background: transparent;
                  &::after {
                    margin-left: -7px;
                    background: #1ac48a;
                  }
                }
              }
              .el-switch__core {
                background: transparent;
                border-width: 2px;
                width: 19px;
                height: 13px;
                &::after {
                  width: 5px;
                  height: 5px;
                  top: 2px;
                }
              }
            }
          }
        }
      }
      .step-main-mirror-arrow {
        position: absolute;
        top: 20%;
        right: 144px;
        width: 22px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #2e2f33;
        border-radius: 4px 0 0 4px;
        padding: 5px 0;
        cursor: pointer;
        transition: 0.2s;
        div {
          color: #fff;
          font-size: 14px;
          width: 22px;
          line-height: 26px;
          // &:after{
          //     content: '\003C';
          // }
          // &.active{
          //     &:after{
          //         content: '\003E';
          //     }
          // }
        }
      }

      .step-main-mirror-side {
        position: absolute;
        bottom: 50px;
        right: 150px;
        // width: 240px;
        height: 60px;
        background: #1c1f21;
        color: $white;
        text-align: center;
        border-radius: 5px;
        z-index: 2;
        li {
          float: left;
          width: 60px;
          height: 36px;
          display: block;
          font-size: 12px;
          margin-top: 14px;
          position: relative;
          cursor: pointer;
          border-right: solid 1px #353636;
          box-sizing: border-box;
          &:hover {
            color: #dfdfdf;
          }
          &:last-child {
            border-right: none;
          }
          .iconfont {
            display: block;
            margin-bottom: 2px;
            font-size: 20px;
          }
        }
      }
    }
  }
  //分享
  .dialog-share {
    .button-style {
      width: 90px;
    }

    .dialog-content {
      .share-item {
        width: 280px;
        height: 28px;
        line-height: 28px;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        color: $title-gray;
        margin-top: 20px;
        span {
          float: left;
          width: 210px;
          border-right: solid 1px #e8e8e8;
          padding-right: 38px;
          text-align: right;
          box-sizing: border-box;
        }
        .el-switch {
          float: left;
          margin: 4px 0 0 30px;
        }
      }
    }
  }
  //更改配置
  .dialog-change-config {
    .dialog-content {
      padding: 20px 22px;
    }
    .chang-config-item {
      height: 28px;
      line-height: 28px;
      margin-bottom: 30px;
      &:nth-of-type(odd) {
        margin-right: 25px;
      }
      &:nth-of-type(even) {
        .item-content {
          float: left;
          .el-select {
            margin: 0 10px 0 0;
          }
        }
      }
      .item-label {
        float: left;
        font-size: 16px;
        margin-right: 18px;
      }
      .item-content {
        float: left;
        font-size: 16px;
        .el-select {
          margin: 0 10px 0 20px;
        }
      }
    }
    p {
      float: left;
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #727272;
    }
  }
  //分享桌面
  .dialog-share-desktop {
    .share-desktop-item {
      margin-bottom: 35px;
      &:last-child {
        margin-bottom: 0;
      }
      .item-label {
        float: left;
        width: 155px;
        height: 32px;
        line-height: 32px;
        text-align: right;
        font-size: 14px;
        color: $title-gray;
      }
      .el-radio-group {
        margin-top: 8px;
      }
    }
  }
  //实验截图
  .dialog-screenshot {
    .dialog-content {
      img {
        width: 763px;
        height: 440px;
      }
    }
  }
  //学生手册
  .dialog-handbook {
    p {
      font-size: 14px;
      color: $title-gray;
      text-align: center;
      line-height: 48px;
      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .handbook-item {
      .item-label {
        float: left;
        width: 155px;
        height: 48px;
        line-height: 48px;
        text-align: right;
        font-size: 14px;
        color: $title-gray;
      }
      .el-radio-group {
        margin-top: 17px;
      }
    }
  }
  //视频拖拽
  .dialog-virual-video {
    position: absolute; /*定位*/
    top: 20%;
    left: 35%;
    width: 800px;
    height: 500px;
    overflow: hidden;
    video {
      object-fit: fill;
    }
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      height: 100%;
      width: 100%;
      margin-top: 0 !important;
      margin-bottom: 0;
    }
    .el-dialog__body {
      position: absolute;
      top: 46px;
      bottom: 0;
      width: 100%;
      // height: 438px;
      padding: 0;
      padding-bottom: 3px;
      background: rgba(43, 51, 63, 0.7);
    }

    .dialog-body,
    .line,
    .video-js {
      height: 100%;
    }
  }
  //手册拖拽
  .dialog-target {
    position: absolute; /*定位*/
    top: 10%;
    left: 40%;
    width: 800px;
    overflow: hidden;
    .stepsTitle2 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 350px;
    }
    .videoflag {
      position: absolute;
      right: 14px;
      top: 0px;
      z-index: 9;
      color: #385899;
      font-size: 14px;
      cursor: pointer;
      .icon-shipin4 {
        font-size: 16px;
        vertical-align: -1px;
      }
      &:hover {
        color: #1277eb;
      }
    }
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      height: 100%;
      margin: 0 auto !important;
      .el-dialog__body {
        overflow-x: scroll;
        padding: 0 20px;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        top: 46px;
        bottom: 90px;
        &::-webkit-scrollbar {
          width: 5px;
          height: 0;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
        }
        .dialog-body {
          // height: 365px;
          height: 400px;
          padding: 10px 0;
        }
      }

      .el-dialog__footer {
        position: absolute;
        bottom: 0;
        width: 100%;
      }
    }
  }
  .dialog-hand-book {
    position: absolute; /*定位*/
    top: 10%;
    left: 40%;
    width: 800px;
    //  height: 484px;
    overflow: hidden;
    .stepsTitle2 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 350px;
    }
    .videoflag {
      position: absolute;
      right: 14px;
      top: 0px;
      z-index: 9;
      color: #385899;
      font-size: 14px;
      cursor: pointer;
      .icon-shipin4 {
        font-size: 16px;
        vertical-align: -1px;
      }
      &:hover {
        color: #1277eb;
      }
    }
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      height: 100%;
      margin-top: 0 !important;
      .el-dialog__body {
        overflow-x: scroll;
        padding: 0 20px;
        position: absolute;
        top: 46px;
        width: 100%;
        box-sizing: border-box;
        bottom: 90px;
        &::-webkit-scrollbar {
          width: 5px;
          height: 0;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
        }
        .dialog-body {
          // height: 365px;
          padding: 10px 0;
        }
      }

      .el-dialog__footer {
        position: absolute;
        bottom: 0;
        width: 100%;
      }
    }
  }
  // 实验笔记拖拽
  .dialog-hand-note {
    position: absolute; /*定位*/
    top: 30%;
    left: 30%;
    width: 800px;
    height: 484px;
    background: #fff;
    overflow: hidden;
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      height: 100%;
      margin-top: 0 !important;
      .el-dialog__body {
        overflow: hidden !important;
        height: 65%;
        .dialog-body,
        .mavon-editor-con,
        .markdown-body {
          height: 100%;
        }
      }
    }
  }
  //sftp上传弹窗样式
  .sftp-dialog {
    .el-dialog__body {
      padding: 38px 50px 30px;
    }
    .sftp-content {
      .sftp-header {
        border-bottom: solid 2px #dfdfdf;
        padding-bottom: 25px;
        margin-bottom: 25px;
        p {
          span {
            color: #5281c6;
            margin-right: 20px;
          }
        }
      }
      p {
        font-size: 16px;
        line-height: 30px;
      }
      .sftp-title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        margin-bottom: 15px;
      }
      .sftp-desc {
        p {
          span {
            padding: 5px 10px;
            border-radius: 5px;
            background: #eeeeee;
            font-size: 14px;
            margin: 0 5px;
          }
          i {
            margin-left: 5px;
            color: #5281c6;
            position: relative;
            font-size: 28px;
            &:last-child {
              margin-left: 40px;
            }
            img {
              position: absolute;
              right: -28px;
              top: -20px;
            }
          }
        }
        .desc-item {
          margin-top: 30px;
          height: 60px;
          .item-pic {
            float: left;
          }
          a {
            float: left;
            font-size: 14px;
            margin-top: 12px;
            i {
              font-size: 18px;
              vertical-align: sub;
              margin-left: 24px;
            }
          }
          // overflow-y: scroll;
          // &::-webkit-scrollbar {
          //     width: 3px;
          // }

          // &::-webkit-scrollbar-thumb {
          //     background: #5281c6;
          // }
        }
      }
    }
  }
  //实训项目制作剪切板
  .cut-dialog {
    .cut-title {
      margin-bottom: 15px;
      p {
        font-size: 14px;
        span {
          font-size: 16px;
        }
      }
    }
    .el-form {
      .el-form-item {
        .el-form-item__content {
          height: auto;
        }
        .desc-num {
          float: right;
          margin-top: 170px;
          color: #bbb;
        }
        .el-textarea {
          float: left;
          width: 85%;
          .el-textarea__inner {
            height: 200px;
            resize: none;
          }
          .el-textarea__inner {
            min-height: 200px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 5px;
            }

            &::-webkit-scrollbar-thumb {
              background: #6589ae;
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
  // 上传流程
  .common-tool-dialog {
    .el-input {
      float: left;
    }
    .version-file {
      padding: 0 40px;
      .el-form-item {
        margin-bottom: 0;
      }
      .el-button {
        float: left;
        position: relative;
        background: #1277eb;
        color: #fff;
        border-radius: 5px;
        width: 100px;
        height: 36px;
        line-height: 36px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        cursor: pointer;
        span {
          display: block;
          cursor: pointer;
        }
      }
      input {
        position: absolute;
        width: 100px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #cc281a;
        opacity: 0;
        cursor: pointer;
      }
    }
  }
  // 学生手册显隐
  .dialog-display-hide {
    .el-table colgroup.gutter {
      display: table-cell !important;
    }
    .el-table {
      tr {
        th {
          &:nth-child(2) {
            .cell {
              text-align: left;
            }
          }
        }
        td {
          &:nth-child(2) {
            .cell {
              width: 260px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            text-align: left;
          }
          &:last-child {
            font-size: 14px;
            color: #cfcfcf;
          }
        }
      }
    }
  }
  // 镜像保存弹窗
  .dialog-mirror-save {
    .el-form {
      .el-form-item {
        position: relative;
        .el-form-item__content {
          height: auto;
        }
        .el-input {
          .el-input__inner {
            width: 230px;
          }
        }
        .el-textarea {
          height: 180px;
          .el-textarea__inner {
            width: 600px;
          }
        }
      }
    }
    .distribution-swpier {
      position: relative;
      width: 700px;
      height: 64px;
      margin-bottom: 35px;
      margin-left: 55px;
      margin-top: 15px;
      .swiper-btn {
        background-image: none;
        outline: 0;
        top: 46px;
        i {
          font-size: 20px;
          color: #b1b1b1;
          &:hover {
            color: #474747;
          }
        }
      }
      .swiper-button-prev {
        left: -35px;
      }
      .swiper-button-next {
        right: -35px;
      }
    }
    .distribution-box {
      position: relative;
      width: 100%;
      height: 64px;
      line-height: 64px;
      background: #fff;
      border: solid 1px #d9d9d9;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      box-sizing: border-box;
      img {
        width: 100%;
      }
      &:hover {
        border-color: #1277eb;
      }
      i {
        position: absolute;
        bottom: 28px;
        right: 8px;
        font-size: 14px;
        color: #3fdb9b;
        width: 14px;
        height: 14px;
      }
    }
  }
  // 重选配置弹窗样式
  .dialog-distribution {
    .el-dialog__body {
      min-height: 350px;
    }
    .el-form {
      padding: 0 50px;
      .el-dialog__body {
        position: relative;
      }
      .el-form-item__label {
        width: 95px;
      }
      .el-select {
        .el-input__inner {
          width: 80px;
        }
      }
      .el-input__icon {
        line-height: 32px;
      }
      .miror-item {
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
            .el-input__inner {
              width: 150px;
            }
          }
        }
      }
      .config-item {
        .item-config {
          width: 340px;
          .el-select {
            .el-input__inner {
              width: 110px;
            }
          }
        }
        .item-cpu {
          .el-form-item__error {
            left: 95px;
          }
        }
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
          }
          &.item-distributed {
            width: 270px;
            .el-select {
              .el-input__inner {
                width: 180px;
              }
            }
            .el-form-item__error {
              left: 85px;
            }
          }
          &.item-Gpu {
            width: 100px;
            .el-form-item__label {
              width: 55px;
            }
          }
        }
      }
      .form-title {
        font-size: 16px;
        color: #385899;
        width: 85px;
        margin-bottom: 15px;
        text-align: center;
      }
      .el-select {
        .el-input__inner {
          width: 180px;
        }
      }
      .el-cascader {
        line-height: 32px;
      }
      .item-node {
        .el-form-item {
          display: inline-block;
          width: 330px;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      .el-button {
        width: auto;
      }
    }
    .button-style {
      min-width: 90px;
    }
    .el-radio-group {
      .el-radio__inner {
        border-color: #dcdfe6;
      }
      .el-radio {
        width: 80px;
      }
    }
    .virtual-step {
      width: 188px;
      border-bottom: solid 3px #dfdfdf;
      margin-top: 15px;
      margin-left: 80px;
      ul {
        li {
          float: left;
          width: 19px;
          height: 19px;
          line-height: 19px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          border-radius: 10px;
          margin: -9px 0 0 0;
          background: #d9d9d9;
          cursor: pointer;
          &.active-disabled {
            cursor: not-allowed;
          }
          &:first-child {
            margin-left: 10%;
          }
          &:nth-child(2) {
            margin-left: 29%;
          }
          &:last-child {
            margin-left: 31%;
          }
          &.active {
            background: #1277eb;
          }
        }
      }
    }
    .distribution-item {
      width: 208px;
      height: 280px;
      border: solid 1px #e8e8e8;
      border-radius: 4px;
      position: absolute;
      right: 55px;
      top: 95px;
      .jx-course-box {
        margin-top: 25px;
        text-align: center;
        img {
          width: 34px;
          height: 39px;
        }
        span {
          display: block;
          font-size: 14px;
          color: $title-gray;
          margin-top: 10px;
        }
      }
      .jx-course-icon {
        position: absolute;
        right: 18px;
        top: -5px;
      }
      .jx-course-text {
        margin: 10px 24px 0;
        height: 145px;
        overflow-y: scroll;
        font-size: 12px;
        line-height: 16px;
        color: $table-gray;
        word-wrap: break-word;
        &::-webkit-scrollbar {
          width: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: #6c6c6c;
        }
      }
    }
  }
  // 图片放大

  .bigger-dialog {
    .el-dialog {
      width: min-content;
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      background: transparent;
      text-align: center;
    }
  }
}
//专科版本添加列表样式
.chapterlists {
  cursor: pointer;
}
//详情盒子
.detailBox {
  width: 400px;
  position: absolute;
  top: 64px;
  bottom: initial;
  // right: -200px;
  background: #26292c;
  max-height: 700px;
  border-radius: 4px;
  display: none;
  z-index: 9;
  .chapterList-top {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    padding: 0 18px;
    & > p {
      line-height: 50px;
      color: #a2a3a4;
    }
    i {
      color: #a2a3a4;
      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .courseName {
    margin: 5px 0;
    cursor: pointer;
    .icon-tubiaozhizuomoban1 {
      color: #1374e4;
      font-size: 16px;
    }
    &:hover {
      color: #fff;
    }
  }
  .icon-diannao-copy {
    font-size: 14px;
    margin-left: 8px;
    color: #1374e4;
    vertical-align: super;
  }
}
.collapsTitle {
  text-align: left;
  // margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 22px;
  color: #a2a3a4;
  .collapsTitle_span {
    max-width: 270px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 13px;
  }
  .icon-chaibaoguoqujian {
    color: #a2a3a4;
    font-size: 14px;
  }
  &:hover {
    color: #fff;
    .icon-chaibaoguoqujian {
      color: #fff;
    }
  }
}
.icon-shijian00 {
  color: #1374e4;
  margin-left: 5px;
}
.detailBox .infoName {
  display: inline-block;
  &:hover {
    span {
      color: #1374e4;
    }
    .crile {
      background: #1374e4;
    }
  }
}
.detailBox .icon-diannao-copy {
  font-size: 14px;
  margin-left: 8px;
  color: #1374e4;
  vertical-align: super;
}
.crile {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a2a3a4;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 9px;
}
.studying {
  color: #1374e4;
}
.crileBg {
  background: #1374e4;
}
.detailbox {
  padding: 2px 0 2px 15px;
  cursor: pointer;
  &:hover {
    color: #1374e4;
    .crile {
      background: #1374e4;
    }
  }
}
.Tiltlefiles {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 210px;
  cursor: pointer;
}

.intnet {
  color: #1277eb;
  font-size: 14px;
  display: inline-block;
  vertical-align: 12px;
}
.taskName {
  margin-right: 5px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}
.icon-42 {
  font-size: 12px;
  vertical-align: text-bottom;
  margin-left: -2px;
  margin-right: 5px;
}
.dialogList {
  .dialog-content {
    text-align: center;
    i {
      font-size: 50px;
      color: #d6d6d6;
      display: block;
      margin-top: 25px;
    }
    p {
      font-size: 14px;
      text-align: center;
      line-height: 18px;
    }
    .handbook-item {
      text-align: center;
      margin-top: 30px;
    }
  }
}

.machineInfo {
  margin-right: 40px;
}
.chaptersa {
  cursor: pointer;
  // position: absolute;
  // right: 200px;
  color: #bbb;
  &:hover {
    color: #fff;
  }
}
</style>
<!-- 王天宇 星级评分 css -->
<style lang="scss">
#jx-experiment-virtual-machine {
  .star-box {
    margin-left: 40px;
    display: flex;
    align-items: center;
  }
  // .dialog-content{
  //     text-align: left;
  // }
}
</style>
<!-- 王天宇 星级评分 css end -->

<style lang="scss">
//#region 王天宇-问题答疑 css
#question-buhui {
  padding: 20px 30px;
  .question-b-title {
    display: flex;
    justify-content: space-between;
    color: #474747;
    margin-bottom: 20px;
    line-height: 30px;
  }
  .question-b-btngroup {
    > span {
      margin-right: 10px;
    }
  }
  .question-b-list {
    color: #727272;
    .question-b-list-ul {
      li {
        padding: 0 10px;
        line-height: 50px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid #f4f4f4;
        &:hover {
          color: #1277eb;
          background: #f5f7fb;
        }
      }
      .tea-answer {
        &::before {
          content: '常见问题';
          background: #1ac48a;
          font-size: 12px;
          color: #fff;
          border-radius: 12px;
          padding: 2px 10px;
          margin-right: 6px;
        }
      }
    }
  }
  .question-details {
    .qd-back {
      font-size: 16px;
      line-height: 30px;
      color: #474747;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .tea-answer {
      &::before {
        content: '常见问题';
        background: #1ac48a;
        font-size: 12px;
        color: #fff;
        border-radius: 12px;
        padding: 2px 10px;
        margin-right: 6px;
      }
    }
    .stu-answer {
      &::after {
        content: '用户';
        font-size: 12px;
        background: #fff6e5;
        color: #ffaa00;
        border-radius: 12px;
        padding: 2px 10px;
        margin-left: 6px;
      }
    }
    .qd-title {
      font-size: 24px;
      color: #1d1d1d;
      margin: 20px 0;
      line-height: 40px;
    }
    .qd-content {
      font-size: 16px;
      color: #727272;
      margin: 20px 0;
      line-height: 30px;
    }
    .qd-list {
      .qd-list-title {
        font-size: 16px;
        padding: 20px 0;
        color: #474747;
        border-bottom: 1px solid #f4f4f4;
      }
      li {
        font-size: 16px;
        padding: 10px 0;
        line-height: 30px;
        color: #727272;
        border-bottom: 1px solid #f4f4f4;
        .qd-name {
          color: #999999;
        }
        .ide {
          &::before {
            content: '用户';
            font-size: 12px;
            background: #fff6e5;
            color: #ffaa00;
            border-radius: 12px;
            padding: 2px 10px;
            margin-left: 6px;
          }
        }
        .tea {
          &::before {
            content: '权威解答';
            background: #1ac48a;
            font-size: 12px;
            color: #fff;
            border-radius: 12px;
            padding: 2px 10px;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
.question-buhui-tiwen-dialog {
  .tiwen-bt {
    &::before {
      content: '*';
      color: #f56c6c;
      margin-right: 6px;
    }
  }
  .dialog-tiwen-title {
    font-size: 14px;
    .el-input {
      width: 200px;
      .el-input__inner {
        width: 200px;
      }
    }
  }
  .dialog-tiwen-content {
    .ms-title {
      line-height: 40px;
      text-align: left;
    }
  }
}

//#endregion 王天宇-问题答疑 css
.user-answer-dialog {
    .dialog-content {
        display: flex;
        align-items: center;
        justify-content: center;
        i {
            margin-right: 10px;
            margin-top: 0px;
            color: #606266;
        }
        img {
            margin-right: 10px;
        }
    }
    .button-style {
        width: 110px !important;
    }
}

//#region 王天宇 tab换地方
.new-step-main-content {
  padding-top: 56px;
  position: relative;
  box-sizing: border-box;
}
.new-nav-naxialai {
  box-sizing: border-box;
  border-bottom: 10px solid #f8f8f8;
  width: inherit;
  overflow: hidden;
  background: #fff;
  color: #fff;
  line-height: 55px;
  text-indent: 20px;
  // padding-left:37px;
  position: fixed;
  top: 60px;
  z-index: 1;
  > span {
    font-size: 14px;
    color: #727272;
    margin-right: 20px;
    cursor: pointer;
    &:hover {
      color: #385899;
    }
  }
  .active {
    font-weight: bold;
    color: #385899;
    &::after {
      display: block;
      content: '';
      height: 2px;
      width: 70%;
      margin: 0 auto;
      background: #385899;
      transform: translate(10px, -10px);
    }
  }
}
//#endregion 王天宇 tab换地方
</style>
<!-- 王天宇 星级评分 css -->
<style lang="scss">
#jx-experiment-virtual-machine {
  .star-box {
    margin-left: 5px;
    display: flex;
    align-items: center;
  }
  // .dialog-content{
  //     text-align: left;
  // }
}
</style>
<!-- 王天宇 星级评分 css end -->

<style lang="scss" scoped>
.js-courseName {
  width: 50%;
  margin-left: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.task-score {
  .howmanyscore {
    font-size: 15px;
    font-weight: 900;
  }
}
</style>
